Uploading a file with a single button

Question

All of the examples I've found so far to upload a file with PHP involve:

Choosing a file
Pressing a submit button to upload it (using post).

Is there a way to simply submit the file immediately after it's been chosen so the user doesn't have to click the "Upload" button? I know this is possible. Look at Dropbox's website, or Google Drive. I'm not sure if they use PHP, though.

They likely just listen for the change event of the dialog field and trigger the submit themselves — AbstractChaos, Dec 03 '12 at 17:48
Ok, I found out how. Could anyone of you add their comments as an answer? They were really helpful. — David, Dec 03 '12 at 18:03
This is repetation of this question from stackoverflow.[stackoverflow similar question][1] [1]: http://stackoverflow.com/questions/1904168/how-do-i-submit-a-file-input-without-submit-button-with-javascript — Parag, Dec 03 '12 at 18:03
I am sorry, I did not find that question when searching. I was trying for "Upload file one button php" and similar terms but did not find it. I will vote for delete then. — David, Dec 03 '12 at 18:04

score 4 · Answer 1 · answered Dec 03 '12 at 18:17

You have 2 way :

user jquery :

<form  id="frm" action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /><br/>
</form>

<script type="text/javascript">
<!--
  $(document).ready(function(){
     $('#file').change(function(){
           $('#frm').submit();
     });
  })
-->
</script>

use flash uploader.

i hope help you...

score 1 · Answer 2 · answered Dec 03 '12 at 17:49

1

HTML File upload buttons are not scriptable for security reasons.

answered Dec 03 '12 at 17:49

Diodeus - James MacFarlane

107,156
31
147
171

I suspect you are referring to input elements with a type of "file". In that case, you are correct, some browsers do not permit using javascript to invoke the "select files" dialog if you ALSO intend to submit the associated form via javascript. However, the original poster is not asking for such a solution. It seems clear that the poster is asking for a way to upload a file programatically AFTER the file has been selected. – Ray Nicholus Dec 03 '12 at 20:14

score 0 · Accepted Answer · answered Dec 03 '12 at 17:52

0

What you want is the File API that is part of HTML5 http://www.w3.org/TR/FileAPI/ which contains capabilities to upload data via AJAX requests, etc.

unfortunately browser support is still spotty, so while you may be able to implement a drag and drop UI like Dropbox on Chrome or Firefox. You will need to have a fallback for IE.

http://www.html5rocks.com/en/features/file_access

answered Dec 03 '12 at 17:52

javram

2,635
1
11
17

FYI, This is a very nice jquery based framework for doing File Upload http://blueimp.github.com/jQuery-File-Upload/ – javram Dec 03 '12 at 17:54
Not interested in third party libraries, sorry. – David Dec 03 '12 at 17:54
@David If you'd like to re-invent the wheel, have fun. But there are several javascript-based libraries out there that already do exactly what you want. Depending on your needs, this may not be a trivial project for you to take on. No having any knowledge in this area, which you apparently do not, will also make this a frustrating endeavor for you. Two of the big ones are BlueImp's jQuery file uploader, and Fine Uploader. I maintain the latter. – Ray Nicholus Dec 03 '12 at 20:10

score 0 · Answer 4 · answered Jun 27 '16 at 06:49

Below code will solve your issue regardless of browser incompatibility. I use this very often.

function startUpload() {
    var file_button = document.createElement('input');
    file_button.type = "file";
    file_button.id = "file_button1";
    file_button.style.display = "none";
    file_button.style.position = "absolute";
    file_button.onchange = function() {
        var form_data = new FormData();
        var file = jQuery(this).get(0).files[0];
        form_data.append('file', file);
        form_data.append('type', type);
        form_data.append('name', 'fileToUpload');
        setTimeout(function() {
            jQuery.ajax({
                url: "/uploadfile.php",
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                xhr: function() {
                    var myXhr = jQuery.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', custom_progress, false);
                    }
                    return myXhr;
                },
                success: function(response) {
                    console.log(response);
                }
            });
        }, 1000);
    };
    jQuery(document.body).append(file_button);
    file_button.click();
    jQuery("#file_button1").remove();
}
function custom_progress(e) {
    if (e.lengthComputable) {
        var x = (e.loaded / e.total) * 100;
        jQuery("#progress").html(x + "%");
    }
}

Your serverside code would look something like this

<?php

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if ($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
} else {
    echo "File is not an image.";
    $uploadOk = 0;
}

Found this solution here at Ajax file upload and progress

Uploading a file with a single button

4 Answers4