How to preview image upload without using FileReader

Question

Is there a solution to previewing an image upload (or faking it) without using FireReader?

Are you asking how to read a file without reading a file? – SLaks Oct 17 '13 at 16:14 — SLaks, Oct 17 '13 at 16:14

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

You could send the file to the server through Ajax (yes it is possible), then have the server send you back the URL of that temporary file and display that in your front-end. It is a bit of a hassle just to avoid using File API but if you must, it is the only way I know that doesn't rely on Flash...

Be sure to check this plugin even if just for inspiration.

You can also check this thread detailing many other ways of doing this.

Hope this helps!

edited May 23 '17 at 11:50

Community

1
1

answered Oct 17 '13 at 16:24

Simon Walsh

67
7

The library you mentioned (which I maintain) will support client-side pre-upload image previews (scaled and properly oriented based on EXIF data) in the upcoming 4.0 release, but the code for this is completed in the develop branch on github. The fallback for older browsers requires the server return a URL to a thumbnail in the response to the upload request, in which Fine Uploader will display (and scale) the thumbnail next to the file in the UI. The drawback to this "fallback" means that the image doesn't appear until the entire file has been uploaded and response has been parsed. – Ray Nicholus Oct 17 '13 at 17:12
Yep! I get that. But still I have used your library (kudos by the way!) in many projects and the delay is fairly short unless you upload a gigantic image (we can't prevent that without file API, catch 22!). UX-wise, I think if you clearly show your user that the preview is loading (a loader gif, etc.) then you are golden. – Simon Walsh Oct 17 '13 at 17:27
Client side previews become more appealing when the files are selected but not submitted for upload until some later time. – Ray Nicholus Oct 17 '13 at 19:05
Agreed. But I was referring more to the fallback cases. Ideally - and most times - you can rely on that API and do everything without submitting. – Simon Walsh Oct 18 '13 at 19:50

score 0 · Answer 2 · answered Oct 17 '13 at 16:54

i have written following code for my college project and its working fine on my local server. The idea is to use iframes as ajax can't handle binary data hide those frames hide php form buttons and use fake button for browse and upload the file (in this case replace the profile pic of user if user press upload button).i haven't included code for remove or discard button because its still work under progress but its easy and you can just run ajax call and call some php script to delete that temporary file. The code is big and include all javascript/jquery, php and html snippets soplease ask if you have some doubts.

Javascript code

var photoname;

$('#profilepic ').delegate('button#uploader1','click',function () {

if ($(this).prop("type") == "button") {
        $('#profilepic').attr('target','hiddenframe1').attr('action','/phpScripts/tempphoto.php');
        $('#uploadphoto').removeAttr('src');
        $('#profilepic input#photo').click();

        $(this).remove();
        $('<button type="submit" id="uploader2">Upload</button>').insertBefore($('#profilepic button#removephoto'));
        setTimeout(function () {
            var interval = setInterval(function () {
                if ($('#photo').val()) {
                    photoname = $('#photo').val().substring($('#photo').val().lastIndexOf('\\') + 1)
                   $('#profilepic input#submit').trigger('click', function (event) {})

                    setTimeout(function(){
                        $('#profilepic').css(
                            {
                        backgroundImage: 'url(/data/' + usr +'/'+photoname + ')'
                    })
                    },1000);
                    clearInterval(interval);
                }
            }, 200);
        }, 200);
    }


})

$('#profilepic ').delegate('#uploader2','click',function (){
    if ($(this).prop("type") == "submit") {

        $('#profilepic').attr('target','hiddenframe2').attr('action','/phpScripts/uploadphoto.php');
        $('#uploadphoto').attr('src','/phpScripts/uploadphoto.php');
        $('#profilepic input#submit').click();
        $(this).remove();
        $('<button type="button" id="uploader1">Browse</button>').insertBefore($('#profilepic button#removephoto'));
        document.getElementById('profilepic').reset();

    }
})

the html file when the page loads first time or refreshed

<form id="profilepic" target="hiddenframe1" action="/phpScripts/tempphoto.php" method="post" enctype="multipart/form-data" style="background-image: url(http://www.xyz.com/data/UDB/UDB.jpg); width: 180px; height: 180px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    <input type="file" name="photo" id="photo" style="display: none;">
    <input type="submit" name="submit" value="Submit" id="submit" style="display: none;">
    <button type="button" id="uploader1" style="display: none;">Browse</button>
    <button type="button" id="removephoto" style="display: none;">Remove</button> 
</form>

<iframe id="tempphoto" name="hiddenframe1" src="/phpScripts/tempphoto.php"></iframe>

<iframe id="uploadphoto" name="hiddenframe2"></iframe>

phpFile tempphoto.php

<?php

session_start();
$dt=$_SESSION['uname'];
$dest=$_SERVER['DOCUMENT_ROOT']."/data/$dt/";
$filename;

if ($_FILES["photo"]["error"] > 0)
{
  echo "Error: " . $_FILES["photo"]["error"] . "<br>";
}
else
{
 echo "Upload: " . $_FILES["photo"]["name"] . "<br>";
 echo "Type: " . $_FILES["photo"]["type"] . "<br>";
 echo "Size: " . ($_FILES["photo"]["size"] / 1024) . " kB<br>";
 echo "Stored in: " . $_FILES["photo"]["tmp_name"];
 move_uploaded_file($_FILES['photo']['tmp_name'], $dest.$_FILES['photo']['name']);
 $filename=$_FILES["photo"]["name"];
 }

?>

phpFile uploadphoto.php

<?php

session_start();
$dt=$_SESSION['uname'];
$dest=$_SERVER['DOCUMENT_ROOT']."/data/$dt/";
$filename;

if ($_FILES["photo"]["error"] > 0)
{
 echo "Error: " . $_FILES["photo"]["error"] . "<br>";
}
else
{
 echo "Upload: " . $_FILES["photo"]["name"] . "<br>";
 echo "Type: " . $_FILES["photo"]["type"] . "<br>";
 echo "Size: " . ($_FILES["photo"]["size"] / 1024) . " kB<br>";
 echo "Stored in: " . $_FILES["photo"]["tmp_name"];
 move_uploaded_file($_FILES['photo']['tmp_name'], $dest.$_FILES['photo']['name']);
 $filename=$_FILES["photo"]["name"];
}

 unlink($dest.$dt.".jpg");
 rename($dest.$filename,$dest.$dt.".jpg");
?>

How to preview image upload without using FileReader

2 Answers2