pekebyte / pekeupload

jQuery html5 file uploader plugin

Hi 👋, I'm Pedro Molina

A passionate full-stack developer from Venezuela

• 📝 I regularly write articles on pekebyte.com

• 📫 How to reach me [email protected]

Connect with me:

Languages and Tools:

pekeupload's Issues

Enable Drag mode disable click mode, click mode didn't work

Hi, I can see drag mode is picking files from orignalEvent.dataTransfer.files and it is working fine without progress bar,

when i click on container to pick file, it just did not show anything at all..

How to use data option ?

Sorry just found, thanks var_dump....

How are the data variables accessed server side?

On the server, $_REQUEST['data']['var_name'] does not return 'my_value'

Here's the config:

        $(".file-upload-field").pekeUpload({
            url:'/ajax/upload_file',
            data:{
                'var_name':'my_value'
            }
        });

Drag and Drop not send file

Hi. Thanks for your plugin, but I see one error.
I use dragMode: true and onSubmit: true
If I clicking by drop zone and selecting a file from finder - all working fine.
But, if I move a file to drop zone and submit the form, I can see that $_FILES an empty.

Example Progress bar ?

Example Progress bar ?

Progress bar is not working

Hi, Progress bar does not seem to work where xhr request is sent, progress bar should also move for that file..

Allowed extension usage

In ReadMe usage is like this:

| allowedExtensions | "" | "ext1" | Sets the file extensions allowed to upload |

however user can not understand how to use multiple extensions in options.

destroy

How to destroy pekeUpload?

Submit form data along with peke image upload

Hi im still a bit new to developement but learning all the time.

right now i have a map based site (using openlayers) and user clicks on map which launches a form with fields and a browse button at the bottom to submit an image using peke. its working in that when i hit browse and upload an image it does that successfully and also the form data is submitted. the issue is the form data and the image data are submitted to the mysql database as seperate entries.

Wonder if anyone can piont me in the right direction about including peke in the right manner so that when i the image is submitted the data goes the same database entry as the rest of the form on my site. thanks

Compatibility Bootstrap 3 ?

Hi, just to know if you had the project to update you plugin with the new boostrap version ?

Thanks.

How to change data after initialization

After the upload tool initializes, users can set some options for upload (e.g., overwrite existing files) and these options must be passed in the data variable. If I simply repeat the pekeUpload init, it creates a second upload button. How can I destroy the first one and replace with a second?

how to upload multiple files ?

With this script i can't upload multiple files.
I added input like this:
<input id="file" type="file" name="file" multiple/>
but even if i choose multiple files, the preview shows me only one and in php i get only one file with $_FILES['file']

Maybe i don't understand the script or i miss something. Please, help me.

Use plugin in CommonJS

Add please this line to your package.json for use plugin in CommonJS/Browserify bundles.

"main": "./js/pekeUpload.min.js",

Multiple files in preview, but only one file is sent in post data.

I am using the onSubmit option.

$("#files").pekeUpload({bootstrap: true, allowedExtensions:"jpeg|jpg|png|gif", onSubmit: true, dragMode: true});

When I check the post data sent I can see that only one file was sent.

Content-Disposition: form-data; name="files[images][]"; filename="index2.jpeg"

Content-Type: image/jpeg

sizeError shows on all errors

Hi.

I'm trying out your script, and it works great, except when I return a (error) string from the server to signal that somthings wrong with the upload. When I do that, it shows the sizeError message by default. Which can be a bit confusing for the user.

Upload Bar not updating percent

Hi,

Great work thus far. I have setup the plugin correctly, I believe. Once I choose the file to upload, the upload begins and the div for the bar shows up but the bar does not update while the upload is in progress. It stays empty. Any idea what I could be doing wrong?

Initialize pekeUpload using class selector

How to properly initialize pekeUpload using "class" selector (not ID), something like :

$(".uploader").pekeUpload();

I want initialize many form input with pekeUpload in one page with same configuration. All parameters will be set on "data-*" attributes, so it can be very flexible.

I try using "class" selector it's work, but when i press the "Browse files .." button, it's trigger "Browse files window" for all form (browse window popped up so many times). It's bugs?

pekeUpload.js:192 Uncaught TypeError: Cannot read property 'name' of undefined

I got 2 problems:

error message:

1. pekeUpload.js:192 Uncaught TypeError: Cannot read property 'name' of undefined
2. Uncaught ReferenceError: json is not defined

my problems:

1. always return this error when upload was succeeded, why?
2. some thing gotta strange:
   2.1 case 1:
   first time to select file for fuPictureUrl, upload complete, but return error as title.
   and then select file for fuQRCodeUrl, upload complete, but return error as title and fuPictureUrl's upload result repeat one time.

(in other words, when I finish all step of case 1, I can see 3 upload result, fuPictureUrl 2 times, fuQRCodeUrl one time)

2.2 case 2:
first time to select file for fuQRCodeUrl, reutrn error as title and upload was not complete. and then select file for fuPictureUrl, upload complete, but the upload result of fuPictureUrl display on fuPictureUrl and fuQRCodeUrl.

(in other words, when I finish all step of case 2, I can see the same upload result on fuPictureUrl and fuQRCodeUrl)

my code brief:

<script type="text/javascript" charset="utf-8" src="assets/js/pekeUpload.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {

    $("#fuPictureUrl").pekeUpload({
        maxSize: 0,
        allowedExtensions: "jpeg|jpg|png|gif",
        multi: false,
        btnText: "Select your picture",
        onSubmit: false,
        url: "ashxs/file_upload_handler.ashx"
    });

    $("#fuQRCodeUrl").pekeUpload({
        maxSize: 0,
        allowedExtensions: "jpeg|jpg|png|gif",
        multi: false,
        btnText: "Select QR Code",
        onSubmit: false,
        url: "ashxs/file_upload_handler.ashx"
    });
</script>

<form id="form1" runat="server"><!--Begin Form-->
<table>
<tbody>
<tr>
    <th>Picture</th>
    <td>
        <input id="fuPictureUrl" name="fuPictureUrl" type="file" />
    </td>
</tr>
<tr>
    <td colspan="2">
        <div>Size: Width, 306px; Height, 376 px</div>
        <div>Format: jpeg, png, gif。</div>
    </td>
</tr>
<tr>
    <th>Name</th>
    <td>
        <input id="tbFullName" type="text" />
    </td>
</tr>
<tr>
    <th>IM</th>
    <td>
        <input id="tbVXinCode" type="text" />
    </td>
</tr>
<tr>
    <th>Mobile</th>
    <td>
        <input id="tbMobile" type="text" />
    </td>
</tr>
<tr>
    <th>Office</th>
    <td>
        <input id="tbOffice" type="text" />
    </td>
</tr>
<tr>
    <th>QRCode</th>
    <td>
        <input id="fuQRCodeUrl" name="fuQRCodeUrl" type="file" />
    </td>
</tr>
<tr>
    <td colspan="2">
        <div>Size: Width, 430px; Height, 430 px</div>
        <div>Format: jpeg, png, gif</div>
    </td>
</tr>
<tr>
    <th>修理厂</th>
    <td>
        <select id="garages" name="garages">
            <option value="">-请选择-</option>
<%=Garages %>
        </select>
    </td>
</tr>
</tbody>                            
</table>
<div>&nbsp;</div>
<!--ToolsStript-->
<div class="btn-toolbar">
    <div class="btn-group">
        <span id="save" class="btn btn-sm">保存</span>
        <span id="cancel" class="btn btn-sm">取消</span>
    </div>
</div> <!--ToolsStript-->
</form><!--End Form-->

chunking

can you add chunking thanks

Sequence Upload.

You should add sequence upload to upload files one by one, sending ajax request with loop will simply crash browser, for example I've uploaded 500 files that will open 500 ajax request thread and simply browser can stop responding, why don't you add sequence upload that upload file as limit e.g upload as 2 by 2, or 1 by 1, or 5 by 5 and give control to person to set this value.

SyntaxError: Unexpected end of JSON input

I'm getting this error on file upload of type video. The video will show as if it wants to preview then the error will popup. I checked the file upload folder and I notice the video file is not uploading.

could anyone please help me on saving filename of uploaded file to mysql database

any simple example or explanation will do.

hope someone can help me on this. thanks.

show server error

Hello,

I've set the errorOnResponse property on creating the control:

$(element).pekeUpload({ errorOnResponse: 'some error' });

and if the server return an error:

return Json(new { error = "not allowed to upload files" });

the pekeUpload show the "some error" message insted of the "not allowed to upload files"

How can i show the server message insted?

Saw a bug

            pekeUpload.obj.on('change', function() {
                pekeUpload.checkFile(pekeUpload.obj[0].files[0]);
            });
            //$(document).on("change", this.obj.selector, function() {
            //    pekeUpload.checkFile(pekeUpload.obj[0].files[0]);
            //});

on "change" event listening on document

Also, delete a file, add again, can't change to listening

Error with multpile inputs

File Details:

`

<script> $("#file1").pekeUpload({ limit: 1, onSubmit: true }); $("#file2").pekeUpload({ limit: 1, onSubmit: true }); $("#file3").pekeUpload({ limit: 1, onSubmit: true }); </script>

`

I want to select one file for each input. After selecting all files I want to upload all files manually.
When i select 2nd or 3rd inputs I get limit error for the 1st and 2nd.

multi: true

im using your script but when i try to select multi files i need upload just select one, WHY?

Progress Bar

The progress bar is not working.
And I read the source code found that
If you want to see the progress bar,you should add the option: "notAjax:true"...
it is not notice in the document...

pekeUpload.files.length!='' ?

In handleFormSubmission you have validate if condition with pekeUpload.files.length where length is integer and it can never be empty thus means your validation is not working because 0 is not empty Please update your code and add pekeUpload.files.length!='' && pekeUpload.files.length!=0.

on formSubmit = true has bugs if you keep your code length!='' because 0 is not empty as string when the form has no files files[pos] = null on success or user have not selected any files click on submit button will redirect user to (form action="page") action page.

How to delete after download on click the remove from queue?

Is it possible to delete the uploaded file on clicking the "remove from queue" button?
And how to set the file type?

Add pekeUpload dynamically

Hello, I want to add pekeUpload widgets dynamically but when I do the widget fail to work. How can I achieve this?

This is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>PekeUpload Test</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link href="/css/bootstrap.css" rel="stylesheet">
        <link href="/css/bootstrap-responsive.css" rel="stylesheet">

    </head>
    <body>
        <div id="uploadwidgets">
            <p>
                <input type="file" id="uploadfield1" name="uploadfield1" class="fileuploadtest" />
            </p>

            <p>
                <input type="file" id="uploadfield2" name="uploadfield2" class="fileuploadtest" />
            </p>
        </div>
        <button id="btnAddUploadWidget">Add upload widget</button>

        <script type="text/javascript" src="/js//jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/js/pekeUpload-master/js/pekeUpload.min.js"></script>

        <script type="text/javascript">
            $(function(){
                $("#uploadwidgets").append("<input type=\"file\" id=\"uploadfield3\" name=\"uploadfield3\" class=\"fileuploadtest\" />");

                $(".fileuploadtest").pekeUpload({
                    theme: "bootstrap",
                    url: "pekeupload2.php",
                });

                $(document).on("click", "#btnAddUploadWidget", function(){

                    $("#uploadwidgets").append("<p><input type=\"file\" id=\"uploadfield3\" name=\"uploadfield3\" class=\"fileuploadtest\" /></p>");
                });
            });
        </script>
    </body>
</html>

Creating a new pekeUpload with the add button is the one that fails.
Thanks

on "change" event listening on document

Why do you listening to the change event on the document?

$(document).on("change", this.obj, function() { pekeUpload.checkFile(pekeUpload.obj[0].files[0]); });
I have a pekeUpload control and a select2 on the same form, and when i trigger a change event on my select2, i get a
Cannot read property 'size' of undefined
And all starts on this event listening

I think you could use event namespaces, or lintening only on the pekeUpload container

how to use the data options?

i have try many fomats..
but my api cannot read the data..

Image keeps adding themself when some other field in document changed

Solution:
Replace
$(document).on("change", this.obj.selector, function() { pekeUpload.checkFile(pekeUpload.obj[0].files[0]); });

With
$(document).on("change", '#div-block-where-upload-form-is', function() { pekeUpload.checkFile(pekeUpload.obj[0].files[0]); });

Delete function

Is there any delete function for the uploaded files? What if i choose a wrong file and upload it, how can i delete it?

All radios are hooked

Hello,

handlebuttonevents binds all radio on change so if you have a form with radios and click one you fire upload. In my case I switched to:

        handlebuttonevents: function() {
            $('input[type=file]').on("change", function() {
                pekeUpload.checkFile(pekeUpload.obj[0].files[0]);
            });
        }

But it should be proper handled.

Thank you for your component and support!

All the best,
Lucian

If checking for extension and filesize, still returning true if one of them is true

I have a check for filesize and a check for file extension. If 1 of those fails, and the other is true, your code still sets canUpload = true, meaning it still tries to upload the file.

maxSize is specified in bytes not MB

For documentation only, it appears the maxSize option should be specified in bytes not MB