0

I need to be able to upload an image and return the image to the screen for viewing not with an output tag but with an img tag that has a src element. One of the things that's throwing me off in the other tutorials I've seen is the # sign in as a place holder for the src element. I need more detail to implement this portion of it. I reference this from the solution to a similar question which I couldn't implement: HTML input type=file, get the image before submitting the form

I'm using angular and I have no knowledge of jQuery so I'd prefer to avoid jQuery explanations. I'm using the following code to upload and view an image (if the following code includes jQuery, I wouldn't know it as I only understand some of it; I found a library for it and I've been trying to figure it out):

HTML:

<input type="file" id="files" name="files[]" file-model="myFile"/>
<output id="list" class="resize-image" alt="Image"></output>

Javacript:

   var handleFileSelect = function (evt) {//already set up for multiple files; not what i want to do.
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);

Long story short, I want to allow a user to upload a file from desktop, see the file uploaded and crop the image to fit my specifications. I've seen many libraries for this but many have bugs in the demo, if not on my machine. Others leave out portions of the aforementioned process and I am unable to bridge the gaps. The problem with uploading an image through an input and displaying it to the screen as an image with a "src" seems to be the first stumbling block in this process.

Community
  • 1
  • 1
rashadb
  • 2,450
  • 4
  • 29
  • 51

2 Answers2

1

To upload a file but remain on the same page, you are looking at AJAX.

You can code it manually: (an example relevant to you)

AJAX call returns status 200 but no content

Or use a plugin. I've used this one on countless projects:

http://hayageek.com/docs/jquery-upload-file.php

For a few simple examples of how AJAX works (jQuery examples, but the principle is the same -- and the code is much easier to follow):

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

For more info, just Google search on XMLHttpRequest

For quick-learning jQuery, there are excellent (free) video tutorials here:

9 ten-minute videos

200 ten-minute videos

Community
  • 1
  • 1
cssyphus
  • 31,599
  • 16
  • 79
  • 97
1

There is an angular directive here:http://ngmodules.org/modules/angular-file-upload that can handle the file upload.

It will give you the file path as a string you can save and bind to an image tag's ng-src attribute. You can use ng-show to hide/show the image based on the value of the variable you bind to the ng-src attribute.

Make sure to use ng-src, not src, or you won't be able to make the binding work properly.

https://docs.angularjs.org/api/ng/directive/ngSrc

lwalden
  • 803
  • 6
  • 11