Code

Discussion on HTML5 File Upload

Discussion on HTML5 File Upload

By
Cart 674 sales
stbeets

stbeets supports this item

Supported

186 comments found.

I am using the html5upload product with classic asp, and although I have the upload part working, the client doesn’t seem to respond to the returned JSON (example below). I’ve tried the exact same thing in PHP and it works fine. In both cases the response string is: { “result”: true, “url”: ”\/tmp\/database-wordcloud.jpg?time=2016224181747”, “filename”: “database-wordcloud.jpg” }

The progress bar shows red, hangs for a while then stops displaying the resend button. Any suggestions

Rgds Des

I bought the product but when I try to use for rename or delete I can`t find PHP Files. I want to know If its normal and how to solve it

Hey stbeets, could You please post a html sourcecode example, where the multiple upload is implemented? I can’t get the script running. Thank You very much

Adrian

Dear stbeets, i used to use this script recently but now it’s not working anymore. When checking the console, I have the following :

SyntaxError: expected expression, got ’<’ html5fileupload.min.js:1:0 TypeError: $(...).html5fileupload is not a function <anonyme>

Any chance you can help on that ?

Tx

Please disregard this. I have found what was wrong. A rewriterule in HTACCESS file.

Hi, i m using your HTML5 file upload. Its written that when we buy it, we have an exemple with PHP, and I dont have it.

I try to change the name of the file dynamicly and its not working. And i have the same problem with the folder, I want to change it with an id.

Thanks you for your answer

Greg

do you know how to use in zend framework 2????

Hi Adam, Yes, you can specifiy in which folder the files can come. There is a demo php script with this, here you have full control over the files and the folders where you want to put them!

I need to know how to pass a value from my form to the php upload file.

For example, the file is passed through <input type=”file”>, I need <input type=”hidden” name=”listing_uid” class=”listing_uid” value=”test”> passed to the php form, so I can put the “listing_uid” into the sql database..

Please help, Not very familiar with AJAX

Never mind, you obviously don’t support this any more. I worked everything out though however. Thanks.

Hi, i am supporting the plugin, but struggling with time at the moment. Sorry for the late response.

I am having an issue… On my server, I can select the images, then click start upload, the images will upload successfully, but the loading bar turns red instead of the blue color for success… I am stuck. Please help.

Hi Sewezach, do you have a live example for me to look at, so i can see the server response. I think it will give maybe a strict warning, notice or something, so it prefends the plugin from turning into green bars.

Regards, Sander

Hello,

how do i add custom post variables like an id? i need some of them to arrive in the php file…

I guess it is about the ajax custom headers {} But how do i set them up correctly?

Hi, you can add additional values with javascript. When initializing the plugin, html5fileupload({data: {key: value}});

Regards, Sander

ok i am trying to use this plugin but it always shows a red progress bar with the code.

my html code is as follows:

<input id=”resume” class=”col-md-7 col-xs-12” type=”file” value=”upload” name=”resume”>

my javascript code is as follows:

$(’.html5fileuploader’).html5fileupload();

my Applicant.php file has the following code

if(isset($_FILES['resume'])&& ($_FILES'resume'== UPLOAD_ERR_OK))
{
    $newPath = '../applicant/uploads/'. basename($_FILES'resume');
    if(move_uploaded_file($_FILES'resume',$newPath))
    {
        print "file was uploaded";
    }
}
else
{
    echo "cannot find file";
}

Looks great. One question: how do you control where on the server the file is uploaded to. For example you may want to upload photos to a specific gallery and may wish to upload xml files to a totally different directory.

Hi there! I’m using this plugin just to create a simple image uploader. I get an error when the image is larger than 1MB, it upload right (apparently in the front page) but in the server the image is 0b in size… ¿what is the problem or error? You can check it in http://davidm2.com/y/ with the image http://davidm2.com/y/2.jpg Help please!

I, I have order you html5 file upload, I want to sort order upload file and save into database, Now I want to append input textbox in to html5fileupload.js for putting number to order file upload and result json in html5fileupload.php , But not show textbox result, How can i do?

We are receiving an error “413 Request Entity Too Large” when upload files bigger than ~740Kb. Our php.ini is configured to support files up to 16Mb.

Can you please help us?

Thank you!

Sorry, it’s solved, it was a problem with Apache config.

By other hand, it is possible to add the download button to existing files?

Thank you!

Hi, no not at this point, sorry. Glad you solved it!

Hi,

I’m trying to trigger callback function when the upload starts and done uploading.

Here is my code.

<script> $(’.html5fileupload.demo_function’).html5fileupload({ onAfterStartSuccess: function(response) { console.log(“done”); }, onAfterStartAlways: function(response) { console.log(“start”); } }); </script>

but none of these methods will trigger. I need to know the issue.

Thanks you and kind regards,

Hi, i see there is an error in it. The startsuccess fires when upload is completed, the startalways fires when all uploads are complete. Please mail me at sander[at]stbeets.nl to receive a update version.

Hello, I would like to add it to my form, but would like to submit the form even if there is no image selected to upload. Also, can the script auto size the image? So if I want all images to be a specific width automatically without the end user having to resize it, is that possible?

Thanks

Not with this plugin. This plugin is only for resizing an image when the user is selecting one. If you have a form, where the user is not selecting an image, that could be fine, depends on how you are handling the code.

Hi, I bought the product and uploaded the file to http://test.mercaeasy.com/html5fileupload/ without modifications but it is not working. may you check for the problem?

By doing this I see 404 erros for images not found when the page is loaded, but I don’t see any new message on the console after trying to upload an image.

Still there is an error in the upload message

<br /> <b>Strict Standards</b>: Only variables should be passed by reference in <b>/home/www/test.mercaeasy .com/html5fileupload/html5fileupload.php</b> on line <b>14</b><br /> {"result":true,"url":"\/tmp\/279_grotere.jpg?1448484013","filename":"279_grotere.jpg"}

Good! thanks.

Hello, I’m very impressed with this plugin – I can see a lot of uses for it. At the moment, only previews of images are shown in the list of files queued to upload, so I have made a few changes to try and show a file icon if the file extension is, for example, PDF, docx etc. I have also changed the icon font in use from the Gyphicons built into Bootstrap to Font Awesome. The code seems to be working OK apart from the file type icons not actually showing unless the icon is a plain “fa-file-o” generic document icon.

Maybe I did something wrong with the Font Awesome code, probably something really simple…example page is at: http://www.oliversbatteryprimary.com/uploaders.html

In case anybody is interested, the code I changed to show the extension icon is in html5fileupload.js:

Original:

//does not exists, add to uploader var inner = $(‘ ‘).addClass(‘inner’); var preview = null var width = 0;

if (!empty(file.type) && file.type.match('image.')) {
    preview            = $(' ').addClass('preview');
    ele.prepend(preview);
var reader             = new FileReader();
reader.onload = (function(readFile) {
    return function(e) {
        preview.css('background-image','url(' + e.target.result + ')').attr('title',readFile.name);
    };
})(file);
reader.readAsDataURL(file);
width                -= $(preview).outerWidth() + 10;

New:

//does not exists, add to uploader var inner = $(‘ ‘).addClass(‘inner’); var preview = null var width = 0;

if (!empty(file.type) && file.type.match('image.')) {
    preview            = $(' ').addClass('preview');
    ele.prepend(preview);
var reader             = new FileReader();
reader.onload = (function(readFile) {
    return function(e) {
        preview.css('background-image','url(' + e.target.result + ')').attr('title',readFile.name);
    };
})(file);
reader.readAsDataURL(file);
width                -= $(preview).outerWidth() + 10;
} else {
    switch (extension)
        {
            case 'pdf':
                preview = $('  ').addClass('preview');
                break;
            case 'doc':
            case 'docx':
                preview = $('  ').addClass('preview');
                break;
            case 'xls':
            case 'xlsx':
                preview = $('  ').addClass('preview');
                break;
            case 'ppt':
            case 'pptx':
                preview = $('  ').addClass('preview');
                break;
            default:
                preview = $('  ').addClass('preview');
        }
    ele.prepend(preview);
}

Kind regards,

Andy

All fixed now! Apologies for how the formatting ended up in my earlier post…

No problem, have fun with the plugin!

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey