Question

I’m using Codeigniter’s upload library to upload images for user avatars. I’m also using Jcrop which allows users to select an area to crop.

_{(source: webresourcesource.com)}

I’m saving all the coordinates of the selected area in text inputs which I’ll use in php to crop.

Is it possible to display the image selected before uploading?

Upload form:

<?php echo form_open_multipart('upload/do_upload');?>

<input type="file" name="userfile" size="20" />

<input type="submit" value="upload" />

</form>

If possible I’m trying to avoid heavy js for this or uploading 2 times. When choosing a file I notice that it shows the name of it:

Is there a way to use that functionality to retrieve the image path as well (path to the image in the uploader’s computer)? In theory I’ll be able to use that in image tags and display the image without js.

Answer 1

To be clear, you are not uploading the file twice in your current solution, right? You should only be uploading once, storing it in a temporary location, displaying it on the crop page, and then sending the crop parameters back on the second action.

Traditionally, there has been no way to access the contents of a file or the value of the file upload form. There would be a security risk letting a web page know the structure of your file system. (Are you on Windows, on an admin account, …?) Eons ago you could do this, but we got wise.

The File API introduced in HTML5 makes it possible to access files without revealing this information, and there are some cool options available to your client-side application, the key ones being the files property of a file input and URL.createObjectURL.

When you change a form, an internal representation of the file(s) in the input are exposed using fileInput.files which is a FileList object. API’s exist where you can read the bytes but you want to set it as the source of an image.

Since a file is not a URL, URL.createObjectURL creates a virtual URL around the file that can only be used by your page and same-origin iframes. Set the image to this, then onload, revoke the URL and kick off your jQuery cropping plugin:

input.addEventListener('change', function () {
    preview.src = URL.createObjectURL(this.files[0]);
});

preview.addEventListener('load', function () {
    URL.revokeObjectURL(this.src);

    alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height);
});

Try out this jsFiddle in at least Chrome and Firefox. This is obviously not a solution for all browsers but it is a great way to enhance it for browsers that do support it.