When I preload images from our Server use the editor do do any change (or no change at all) and then hit "save" I'll get an error: "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.".

I already tried to set readerCrossOrigin to anonymous but then the Thumbnails will not even load with a "Access to image at '…' (redirected from '…') from origin '…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." error.

It would be totally fine to just get the info (rotated, cropped to) which will be processed on the server.

Is it possible to prevent the call to toDataURL?

Seems that the plugin is not module compatible at the moment.
Isn't really friendly with Webpack, for example.

I managed to make it work a little bit.
$.fileuploader and inner stuff ($.fileuploader.getInstance for example) are not reachable.

Is it possible to make dynamic AJAX upload URL (to PHP) which contains the name of input?

Hello, how can I get the value of a data-attribute from the input field of the image?

I imagine that with callback features.

onSelect: function(item) { var ep = $(this).attr("data-ep"); },

Thanks!

It would be really nice if plugin could automatically rotate photos depending on EXIF data

I have an issue when using the data-fileuploader-files option with a remote image.
I get such error:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I enabled cross origin on the image server but still having this issue.
Do you have an idea how to solve this?

thanks

When using IE11 we cannot open the editor view. I can see the loading spinner (which is not spinning due to the lack of support of animated svg: won't solve) but then nothing happens and I can't exit the situation without reloading the page. There are no messages shown in the console. The network inspector shows successful loading of the image (when editing a preloaded file). But we see the same issue after uploading a new image (even on your demo-pages).

I guess some kind of event is not triggered on image load. Please could you have a look into this. We sadly still need to support IE11 and fileuploader is stated to support >IE10.

All other Browsers we have tested are working just fine, including Edge, Chrome, Firefox and Safari.

Thanks in advance.

Hi,

How can I use multiple instances on the same page?

Thanks.

Hello,

I'm discovering your great work and I must say that I'm impressed !

I've just a special need to fill before suscribing the extended license.

I'm using that example https://innostudio.de/fileuploader/documentation/examples/sorter/upload/

In my project, the goal is to let the user create a photo gallery with captions very easily.

So this is what I'd like to have, step by step:
1- the user uploads only images (jpg jpeg png gif bmp ...) : OK
2- the user can preview the images in thumbnails and sort them in a specific order : OK
3- the user can write for each thumbnail a short description/caption => I need a little input field on/under/over each thumbnail for that
4- Finally I need to submit the "data content" of the download area through a php formular.
I mean to submit, in the order sorted by the user, only the url of the images and their captions. Something like $post='<img src="http://url/image1" title="caption1 wrote by user"/><img src="http://url/image2" title="caption2 wrote by user"/><img .... />';

Do you have any idea of doing that ?

Really really by thanks for your work and for your help !

Philippe

Where do I put the "Captions" code to have the translation in different languages?

Thank you so much

Don't really understand why the code was removed from git in the first day, but to start off with project issues. In safari uploader doesn't work at all, no animations, no upload, nothing. It did worked before while it was jquery filer, so something apparently changed since that time.

I assume general plugin issues will be always addressed and fixed or they go under '1 year professional support' as well? I'd consider buying at least 1 commercial license, since I was full time 'filer' user, but it has to work properly first and complete my needs.

Hi guys,

How can custom attr value the input hidden fileuploader-list-images with jquery in the success function.

My php file upload image generate json with function php json_encode.

$data = array('fileRouteFromStatic'=> $fileRouteFromStatic, 'fileRouteName'=> $this->slugify($fileName).'.'.$fileExtension);

But with can custom this attr...

Regards

how to resize image before upload

Gallery pictures upload all together, not one by one, this case a server overload if images ar more than 10, it's should upload one by one!

Is there a theoretical file size limit for a file that is uploaded using this software?

Dear Team,

I'm facing an issue, which leads to an error regarding addMore option.

Config:

                $(document).ready(() => {
                    $('#images').fileuploader({
                        theme: 'gallery',
                        sorter: true,
                        limit: 30,
                        changeInput: "fileuploader-input-button",
                        extensions: ['jpg', 'jpeg'],
                        addMore: true,
                        files: this.fields.images,
                        thumbnails: {
                            box: '<div class="fileuploader-items">' +
                                '<ul class="fileuploader-items-list">' +
                                '<li class="fileuploader-input"><button type="button" class="fileuploader-input-inner"><i class="fileuploader-icon-main"></i> <span>${captions.feedback}</span></button></li>' +
                                '</ul>' +
                                '</div>',
                            item: '<li class="fileuploader-item">' +
                                '<div class="fileuploader-item-inner">' +
                                '<div class="actions-holder">' +
                                '<button type="button" class="fileuploader-action fileuploader-action-sort" title="${captions.sort}"><i class="fileuploader-icon-sort"></i></button>' +
                                '<button type="button" class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></button>' +
                                '<div class="gallery-item-dropdown">' +
                                '<a class="fileuploader-action-popup">${captions.setting_edit}</a>' +
                                '<a class="gallery-action-rename">${captions.setting_rename}</a>' +
                                '<a class="gallery-action-asmain">${captions.setting_asMain}</a>' +
                                '</div>' +
                                '</div>' +
                                '<div class="thumbnail-holder">' +
                                '${image}' +
                                '<span class="fileuploader-action-popup"></span>' +
                                '<div class="progress-holder"><span></span>${progressBar}</div>' +
                                '</div>' +
                                '<div class="content-holder"><h5 title="${name}">${name}</h5><span>${size2}</span></div>' +
                                '<div class="type-holder">${icon}</div>' +
                                '</div>' +
                                '</li>',
                            item2: '<li class="fileuploader-item file-main-${data.isMain}">' +
                                '<div class="fileuploader-item-inner">' +
                                '<div class="actions-holder">' +
                                '<button type="button" class="fileuploader-action fileuploader-action-sort" title="${captions.sort}"><i class="fileuploader-icon-sort"></i></button>' +
                                '<button type="button" class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></button>' +
                                '<div class="gallery-item-dropdown">' +
                                '<a href="${data.url}" target="_blank">${captions.setting_open}</a>' +
                                '<a href="${data.url}" download>${captions.setting_download}</a>' +
                                '<a class="fileuploader-action-popup">${captions.setting_edit}</a>' +
                                '<a class="gallery-action-rename">${captions.setting_rename}</a>' +
                                '<a class="gallery-action-asmain">${captions.setting_asMain}</a>' +
                                '</div>' +
                                '</div>' +
                                '<div class="thumbnail-holder">' +
                                '${image}' +
                                '<span class="fileuploader-action-popup"></span>' +
                                '</div>' +
                                '<div class="content-holder"><h5 title="${name}">${name}</h5><span>${size2}</span></div>' +
                                '<div class="type-holder">${icon}</div>' +
                                '</div>' +
                                '</li>',
                            onImageLoaded: function (item, listEl, parentEl, newInputEl, inputEl) {
                                var api = $.fileuploader.getInstance(inputEl);

                                // add icon
                                item.image.find('.fileuploader-item-icon i').html('')
                                    .addClass('fileuploader-icon-' + (['image', 'video', 'audio'].indexOf(item.format) > -1 ? item.format : 'file'));

                                // check the image size
                                if (item.format == 'image' && item.upload && !item.imU) {
                                    if (item.reader.node && (item.reader.width < 100 || item.reader.height < 100)) {
                                        alert(api.assets.textParse(api.getOptions().captions.imageSizeError, item));
                                        return item.remove();
                                    }

                                    item.image.hide();
                                    item.reader.done = true;
                                    item.upload.send();
                                }

                            },
                            onItemRemove: function (html) {
                                html.fadeOut(250);
                            },
                            onSelect: function (item, listEl, parentEl, newInputEl, inputEl) {
                                console.log('onSelect');
                            }
                        },
                        dragDrop: {
                            container: '.fileuploader-theme-gallery .fileuploader-input'
                        },
                        afterRender: function (listEl, parentEl, newInputEl, inputEl) {
                            var api = $.fileuploader.getInstance(inputEl),
                                $plusInput = listEl.find('.fileuploader-input');

                            // bind input click
                            $plusInput.on('click', function () {
                                var elem = document.getElementById('images');
                                if (elem && document.createEvent) {
                                    var evt = document.createEvent("MouseEvents");
                                    evt.initEvent("click", true, false);
                                    elem.dispatchEvent(evt);
                                }
                            });
                        },
                        captions: {
                            button: function (options) {
                                return 'Bilder auswählen oder hierhin ziehen';
                            },
                            feedback: vm.getFeedback(),
                            feedback2: function (options) {
                                console.log(options);
                                return options.length + ' ' + (options.length > 1 ? ' Bilder sind' : ' Bild ist') + ' ausgewählt';
                            },
                            confirm: 'Auswählen',
                            cancel: 'Abbrechen',
                            name: 'Name',
                            type: 'Typ',
                            size: 'Dateigröße',
                            dimensions: 'Auflösung',
                            duration: 'Dauer',
                            crop: 'Crop',
                            rotate: 'Rotieren',
                            sort: 'Sortieren',
                            download: 'Download',
                            remove: 'Löschen',
                            drop: 'Hier loslassen zum Hochladen',
                            paste: '<div class="fileuploader-pending-loader"></div> Pasting a file, click here to cancel.',
                            removeConfirmation: 'Möchten Sie das Bild wirklich löschen?',
                            errors: {
                                filesLimit: 'Nur ${limit} Bilder sind erlaubt.',
                                filesType: 'Nur ${extensions} sind erlaubt.',
                                fileSize: '${name} ist zu groß! Bilder dürfen maximal ${fileMaxSize}MB.',
                                filesSizeAll: 'Files that you chose are too large! Please upload files up to ${maxSize} MB.',
                                fileName: 'Datei mit dem Namen ${name} ist bereits ausgewählt.',
                                folderUpload: 'Order können nicht hochgeladen werden.'
                            }
                        }
                    });
                })

my html-element:

 <input type="file" id="images" name="images[]">

The first Upload works, but if I want to add more images (with a second click on the button) the File-Explorer opens but not upload is happening.

Maybe you can support me here? (v2.2)
Thanks for your help.

Greetings.

I think a user needs to be able to specify a container where popup will appear (same as it's with dragContainer at the moment).

In my case uploader and its container is full of "position: relative" styles so I get an ugly small box (for example)

I have a problem with files upload to server when double use on same page. I use theme: "thumbnails", addMore: true and upload start: true. First uploader load images but doesn't upload to server's directory, second one is OK - everything works. I check consol's logs for onSuccess' results:

[...]
onSuccess: function(result, item) {
console.log(result);
var data = {};
[...]

and I get in console:

{"hasWarnings":false,"isSuccess":false,"warnings":[],"files":[]}

Second file uploader is fine but I have a problem with first one... Any idea?

My instances:

$('#file_1').fileuploader({
extensions: ['jpg', 'jpeg', 'png']
});
$('#file_2').fileuploader({
extensions: null
});

hi
is any event to trigger when user add image and showing it's thumbnail ?

I'm trying to upload multiple images (Form submit) with cropping but it is not working for me.
It is working fine when it comes to single file upload.

1. Set config extensions ['jpg', 'png'] in Add-More example
2. Go to site with Fileuploader
3. Choose jpg file, pdf file, jpg file, png file
4. All files after pdf file are missing. Something is not working with extensions validator.

Issue reported on the E-mail by Igor P.

On Google Chrome, when uploading large file, around 10MB, for example:
https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg

using example: examples/image-editor/client-side/

or on home page of this plugin using example of image editor: https://i.imgur.com/Ibw5QZP.png

after adding file like this, file uploader seems to fail silently, it does not display miniature of image, and it does not upload image via XHR request, so it does not seem like any backend limit

it looks like that after upload:
https://i.imgur.com/Ibw5QZP.png

from my analysis it seems, when uploading large files, callback related to saving, reading from blob, onload of image do not fire

I do not know if it is some hard limit of browser, or some kind of bug but in any case there should be some error message for failed upload

also in example: examples/image-editor/client-side/

	$('input[name="files"]').fileuploader({
		limit: 20,
		fileMaxSize: 20,

fileMaxSize: 20,

suggest that upload of 20MB should be supported but it does not seems to be the case

either way there should be some kind of error in case of this error

also when this problem occurs, image being not successfully uploaded like that, is still put inside input fileuploader-list- as JSON, in my case fileuploader-list-files, that is used in backend, and this makes errors in case of failed uploads like this

1. constructors do not return in PHP:

public function __construct($name, $options = null) {
		$this->default_options['move_uploaded_file'] = function($tmp, $dest, $item) {
			return move_uploaded_file($tmp, $dest);
		};
        return $this->initialize($name, $options);
    }

constructors do not return anything in PHP
it should just be like that:

public function __construct($name, $options = null) {
		$this->default_options['move_uploaded_file'] = function($tmp, $dest, $item) {
			return move_uploaded_file($tmp, $dest);
		};
        $this->initialize($name, $options);
    }

2. binary safe reading of files:

$sp = fopen($file['tmp_name'], 'r');

it should be changed to:
$sp = fopen($file['tmp_name'], 'rb');
by adding "b" flag for fopen mode, as php documentation suggests: https://www.php.net/manual/en/function.fopen.php

3. code should not count in loop

for($i = 0; $i < count($this->field['input']['name']); $i++) {

4. PHPdoc have different structure, than used in code:

	 * @param $crop {boolean, Array} crop property

should be:

	 * @param boolean|array $crop crop property

because IDE can not read current one

4. probably it would be good idea to put PHP code through some kind of static analysis tool, I use PHP, because as of now I have to disable static analysis because of number of errors like: unnecessary double quotes, non strict comparison etc.

Hi,

I want to validate the extensions with a function because I have several forms of files and images, and depending on what is used, I must allow one extension or another.

Can you give me an idea of ​​how to do it?

I imagine that with the following:

`
onFilesCheck: function(files, options, listEl, parentEl, newInputEl, inputEl) {

		if(inputEl.attr('data-apt') == 'logotip'){
			alert('form 1');
			disallowedExtensions: ['text/plain', 'audio/*']
		} else {
			alert('form 2');
			disallowedExtensions: ['jpg', 'jpeg', 'png']
		}
		
		return true;
	},

`

The alerts are working, but not the dissallowedExtensions.

Thanks!

It would be reat if I could install it using Yarn as I am managing all my packages that way.

Best regards.

hello,

how can I autohide the uploaded item after X seconds?

thanks!

What happened to old repository Issues, and why have a Github page if no code ?

Hello,

when I upload an image with the latest Safari and then open it automatically with the image editor, there is a problem with the editor. See image. Can you look at the problem?

Image Editor Problem

Thanks Daniel

We have appended files and doing sorting, But When we upload any invalid image or invalid no. of images, then user get error alert,after that, it goes inside onSort callback (Look like a bug) :- Sorting Section Is Given Below :-

'sorter'=> array(
'onSort'=> "js:function(list, listEl, parentEl, newInputEl, inputEl) {
updateListingIndex(list);
}"
),
And Remove/delete file section is given below :-

'onRemove' => "js:function(item){
$.ajax({
url : '/sell/ImageDelete',
data: {
'image_value' : item.data.image_value,
'listingId' : '$listingId'
},
method: 'POST',
success :function (result) {
data = JSON.parse(result);
if(data.result != '1') {
$('.ListingImage-error').html(data.error);
}
}
});
}",
I believe there is no point of calling sort function after error happens,It looks like a bug, return false is not working, Please Please Provide Your suggestion

Our input tag includes a required attribute. This makes it possible for frontend validation to fail, if no files have been added/uploaded.
When using the async option and enabling start, the required attribute gets removed by the plugin after the first added/uploaded file. If this file/all files is/are removed by the user, the attribute does not get readded to the input tag, breaking the frontend validation.

Additionally, to make validators like https://github.com/1000hz/bootstrap-validator work reliably, the changed field (either setting the required attribute or changing the value) should be triggered with .trigger('change');

Hi, I want to show already uploaded files in drag-drop file upload, so that i can edit/update files.
need guidance. I couldn't find way to show existing files in your documentation.

Thanks.

// Callback fired before uploading a file
// by returning false, you can prevent the upload
beforeSend: function(item, listEl, parentEl, newInputEl, inputEl) {
	// example:
	// here you can extend the uploading data
	item.upload.data.new_data_attribute = 'nice';

	return true;
}

The example that is provided in documentation doesn't seem to work. It's not even assigning anything to data. If you'll do item.upload.new_data_attribute = 'nice'; it will be there at uploading stage but won't be transferred to uploaded file.
As a temporary workaround I'm currently assigning attributes in onSuccess stage which is not an ideal solution.

Also I have a problem with onRemove. When the file is already uploaded and I try to remove it - everything is ok. If I try to remove the file while it's still being uploaded I get Illegal invocation error and then the whole onRemove stops working, even on uploaded files.

Hello. When I use preloaded files everything works fine thumbnails is shown i can edit them delete etc, the problem is that when I try to post the form the files are missing from the parameters

I seem to have found an issue pertaining to the cropping you can do with the fileuploader. When I tried to use my mobile device which is an iPhone 6, I hand an issue cropping the photo in my form. I wanted to double check to make sure it wasn't from my end and went to your site and tried to crop my photo and still the same thing. It looks like when it crops the picture in the thumbnail rotates and expands.

Update***

My developer took a look at it and found out that it is only doing this to vertical images because of the exif. The fileuploader doesn't recognize the orientation once uploaded so its registering it wrong once your crop and rotate the image. This is only occurring when you take a vertical image oppose to a horizontal one. So not sure if that helps but it at least narrows down the issue.

When I was testing the fileuploader I found that you could not remove the file on my mobile device which is an iPhone. It works inside of the fileuploader-popup but not on the thumbnails.

I need to upload only a single file at a time. So i used the limit property (limit:1) .This will select only one file and but when i submitting the form it post null value. How can i over come this issue?. Is there any other method to upload and submit single file.?

I'm trying to upload a file with drag drop into a directory outside of this plugin structure.
The file is succefully loaded to 100% , no errors found, however if I look into the directory, there is nothing there.
So my question is: is the file being fisicaly uploaded right after being dragged or is this just happening after submitting the form?

The JSON response is [0] but it does show the file details under 'items'.
Thumbnail is also ok.

Hi.

Do you plan add multilangual support like in jQuery Validation (easy to add new lang and change)?

I am using an image uploading library innostudio/fileuploader, in which AJAX is necessary for Drag & Drop Feature, now i don't want to upload images on AJAX but for drag & drop i've made random empty function which creates nothing (not uploading an image). I want to upload image on form submit, but the issue is i'm getting $_FILES empty if i uses AJAX, i've tried sending uploaded image in base64 format which causing POST request error. (Request entity Too Large)

Hi,
Can crop the image before confirm like a "preview"?

Hi!

Because of the lack of capacity of the server in some cases if the user upload an image too large (in pixel size and not in weight), is it possible to restrict the images before uploading them? For example, you can not upload images that are larger than 2000x2000 pixels.

Because if the uploaded file is too big, the server will use too much memory later when handling images (generation of automated thumbnails).

Thanks!

I am using fileuploader plugin for laravel and ajax method.The files are passed and response is okay, but i am getting this Uncaught TypeError: Cannot read property 'getTime' of undefined and the files are not saved according to the example in the documentation.

Hi, is possible to have the caption for multilanguages? How I put different languages in the same captions? Ex. Catalan, Spanish and English.

(I write a new post because the other is already closed, and so it is visible.)

Thanks!!

I'm Using EDD FES I need to configure the fileuploader in the vendor submission form but I can't do this. anywone can help me?

Here are some usefull link
https://docs.easydigitaldownloads.com/article/957-frontend-submissions-submission-form
https://docs.easydigitaldownloads.com/article/654-amazon-s3-and-frontend-submissions

i'm using the basic implementation, with no autostart and with no ajax, just a regular form and a button, i want to know if its possible to send multiple files with ajax on button click.

Is there a way that this can integrated in to a Laravel application?

Env : Chrome 59

I understood this one would delete file not only in HTML view but also file in filelist.

for example, you choose three files and delete one of them. When you submit your form, It should send two Files. But It sends three Files which you select in the first place.

I understood that has filelist type and It is kind of read-only and hard to manipulate. I was figuring out how to make delete function in my file list. I found this package. but It didn't work.

How can i reinitialise or reset fileuploader

We use async and automatic upload and wanted to use the onError config option to trigger the validation, if a file isn't properly uploaded. It's important, so the customer realizes, that something is wrong more prominently (css adjustments) and is not able to submit the form.
On resolution of these errors (retry/change to correct filesize/...) we want to pass the validation. onComplete seemed perfect for that, unfortunately though, it is triggered on every upload try. It doesn't matter if it's successful or not. Even an unsuccessful retry, will trigger onComplete.
I believe it to be caused by our usage of the async and automatic upload.

As the documentation states

Callback fired after all files were uploaded

I expect onComplete only to trigger, if all files have been uploaded successfully.