now I am learning to upload file with HTML5 and JavaScript (JQuery). and I got a problem with it. so, bellow here is the preview of my app.

and from this app, I want to upload file either you choose file from input button or drag and drop the file in the drop zone.

here is the code :

<div class="row">
    <div id="blah" class="col-lg-4 dropzone" ondrop="drag_drop(event)" ondragover="return false">
        <p>Drop Your Image Here</p>
    </div>
    <div class="col-lg-3">
        <?php echo form_open_multipart('umum/uploadFile', ['id' => 'form_upload']);?>
            <div class="form-group">
                <label for="userfile">File input</label>
                <input type="file" id="userfile" name="userfile">
                <p class="help-block">Only image file allowed to upload here.</p>
            </div>
            <button class="btn btn-primary" onclick="uploadFile()">Upload</button>
        <?php echo form_close(); ?>
    </div>
</div>

and then my script :

<script>
        // preview the file that will be uploaded
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $('#blah').html('<img src="'+event.target.result+'" alt="your image">');
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        // manual select file from input file button
        $("#userfile").change(function(){
            readURL(this);
        });

        // drag and drop file image
        $(function() {
            $('#blah').bind('dragover', function() {
                $(this).addClass('dropzone-active');
            });
            $('#blah').bind('dragleave', function() {
                $(this).removeClass('dropzone-active');
            });
        });

        function drag_drop(event) {
            event.preventDefault();

            // parsing data to preview the file before upload
            readURL(event.dataTransfer);

            // alert(event.dataTransfer.files[0]);
            // alert(event.dataTransfer.files[0].name);
            // alert(event.dataTransfer.files[0].size+" bytes");
        }
    </script>

and the problem is I cannot change the value of the input file button when I drag and drop the image in the drop zone. and of course, I cannot upload the file because the input file remains empty. Btw, I have tried to write $('#userfile').val(event.dataTransfer.files[0]); in drag_drop function up there and the result in my console is :

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

now I am learning to upload file with HTML5 and JavaScript (JQuery). and I got a problem with it. so, bellow here is the preview of my app.

and from this app, I want to upload file either you choose file from input button or drag and drop the file in the drop zone.

here is the code :

<div class="row">
    <div id="blah" class="col-lg-4 dropzone" ondrop="drag_drop(event)" ondragover="return false">
        <p>Drop Your Image Here</p>
    </div>
    <div class="col-lg-3">
        <?php echo form_open_multipart('umum/uploadFile', ['id' => 'form_upload']);?>
            <div class="form-group">
                <label for="userfile">File input</label>
                <input type="file" id="userfile" name="userfile">
                <p class="help-block">Only image file allowed to upload here.</p>
            </div>
            <button class="btn btn-primary" onclick="uploadFile()">Upload</button>
        <?php echo form_close(); ?>
    </div>
</div>

and then my script :

<script>
        // preview the file that will be uploaded
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $('#blah').html('<img src="'+event.target.result+'" alt="your image">');
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        // manual select file from input file button
        $("#userfile").change(function(){
            readURL(this);
        });

        // drag and drop file image
        $(function() {
            $('#blah').bind('dragover', function() {
                $(this).addClass('dropzone-active');
            });
            $('#blah').bind('dragleave', function() {
                $(this).removeClass('dropzone-active');
            });
        });

        function drag_drop(event) {
            event.preventDefault();

            // parsing data to preview the file before upload
            readURL(event.dataTransfer);

            // alert(event.dataTransfer.files[0]);
            // alert(event.dataTransfer.files[0].name);
            // alert(event.dataTransfer.files[0].size+" bytes");
        }
    </script>

and the problem is I cannot change the value of the input file button when I drag and drop the image in the drop zone. and of course, I cannot upload the file because the input file remains empty. Btw, I have tried to write $('#userfile').val(event.dataTransfer.files[0]); in drag_drop function up there and the result in my console is :

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

• javascript
• jquery
• html
• file-upload
• drag-and-drop

• and FYI, I want to upload the file manually not using AJAX. – Alexander David Commented Dec 23, 2016 at 11:29

1 Answer 1

NB: Note that There is no cross-browser way to upload dragged & dropped files without Ajax. Also note (and this could be the reason for the limitation) the security implications of trying to assign a value to a file upload input field: if it were possible to programmatically assign values thus, imagine something like:

$("input[type=file]").val("passwords.txt");

So we have to use AJAX. That said, you just have to create a new FormData instance and append to it the dataTransfer.files property from your drop event:

    function drag_drop(event) {
        event.preventDefault();
        $.each(dataTransfer.files, function(i, file) {
            uploadData.append( "userfile", file);
        });
    }

    var $form = document.querySelector('form'),
    ajaxData = new FormData($form);

    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: ajaxData,
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false // Important for file uploads
    });

If your reason for preferring manual uploads is to have all your files uploaded alongside your form when submitted, consider creating a hidden input field and setting its value to the location of the uploaded files when AJAX successfully returns.

You might also want to set the multiple attribute in your file input field, given from your code, I see you processing several files.

Full tutorial