fyneworks / multifile Goto Github PK

I have been using this plugin for a couple years, and it has been great! ... this is not something i would call an issue as much as a request. i have need of a means of checking to make sure that an image being uploaded is at least a minimum size ;) ... i know there is validation for maximum size, and i was wondering if there was a means of validating a min-size? thank you!

I'd like to display the filename on the left, and the remove icon on the right. I've set a custom remove icon using the Remove string, and I've set a custom file string (including an icon) with the File string. But the remove icon shows to the left of the filename, I'd like to have it displayed on the right.

Is this possible?

if you remove the last item from list the MultiFile object will also removed
after that adding new items to the list , it doesn't work anymore

on the demo-page you can test it

• add one item to the list
• push upload-button -> one element
• add another item to the list
• push upload button -> empty

Hi,
I need to validate the format of the file name, eg only accept names in the following format:

xxxxxx-O.jpg
xxxxxx-O.gif
...

where files extensions is validate with the key "accept" in the instance options.

thanks in advance.

Hi,

in the examples the "With an Image Preview" example is not working.
I also didn't find the class "with-preview" in the code.

If you add files the size increases, but the size never decreases when files are removed. console.log of the passed objects to the events will verify that the size does not change when removing files.

I imagine this might tie in with what was being said in #3 about removing and re-adding files. This has been produced and reproduced in Version 37.0.2062.124 m of Chrome.

I am using C# MVC and I wanted to return Json back to the view if the file was successful uploading.
I am having troubles getting this to work. If I add a JavaScript later preventing default, it sends null to my upload function. Is there a way to do this?

I wanted to do something that looks like this:

$("#attachBtn").on("click", function (e) {
        e.preventDefault();
        const frm = $("#attachFiles");
        $.post(frm.attr("action"), frm.serialize(), function(data) {
            if (data.success) {
                $("#alertMessage").addClass("alert-success");
                $("#alertMessage #alertMessageText").text(data.message);
            } else {
                $("#alertMessage").addClass("alert-danger");
                $("#alertMessage #alertMessageText").text(data.message);
            }
 });

Hi,
I´m trying to change position of "" element from the top to bottom under "MultiFile-list".
Do you have an idea, how to do it?
Thanks for every advices.

Hi

I am using MultiFile Js For Multiple File Upload.

First I have added 3 files using file control

1. one.txt
2. two.txt
3. three.txt
   and stored in Database

Now I want to update the Files
In this option i am retrieving the binary data and file name from database.
How to append this stream data files to file control using Multifile js
So that i can remove one or more files
Also i can add some more files to it
After all i will save to Database.

It is possible or not??

Please help me in this

Thanks & Regards
Praveen

Require is working at first time with out adding file. After adding file and removing file before submit, require is not working.

Why isn't there an option to disable check for duplicates?

Hi,

I'm trying to set the max number of files dynamically based on a count of existing images.

I've tried to set the max with this $.fn.MultiFile.options.max = 1; but it's not working at all.

Any insight on this would be appreciated.

Hello,

First let me say.. GREAT WORK, GOOD IDEEA!

I am trying to use the script when I am editing an article and I can't figure how to populate the list with my existing images.
Can I send an array to the object in order to populate the list? (if yes, how?)

I am trying to get something similar with the picture attached when I edit an article.
http://i.imgur.com/WaytyPG.jpg

Thank you and hope you can help.
I was able to put it together with sortable :)

Need some way to trigger select file dialog.
For example if you want apply some CSS styles to button that triggers file select, one way is to $(".file").click() while click on it but it will trigger select on all added inputs with the same class.
You can just add some class for current visible input. Now there is no way to identify visible input.
They have different IDs but how to get ID of visible input?

This used to work fine in version 1.47 but now an alert box is shown instead.

If user select multiple files at the same time. It need to display separately with delete icon instead if comma sepration. like it is displaying for single file seletion.

I use this plugin but when I choose file and click ok. All file was moved to div "file_list" which I created. However, Only a checkbox for all files, so, how can I add a checkbox before each of images? Thank you.

I am using jquery multifile upload plugin http://www.fyneworks.com/jquery/multifile can able to select document but when i tried to select wrong file it shows validation message as alert

" You cannot select a .mp4 file. Try again... "

instead of alert message how to show as validation text message ? also any possiblities to add "Required" validation for file using this plugin.

using substr or substring I'm trying to shorten the lengthy label name in files listing in that plugin

this is a ordinary working example jsFiddle that I created using both substring and substr

in above plugin this is the place there binding label names to that files list

// Add a new file to the list
            MultiFile.addToList = function (slave, slave_count, files) {
                //if(window.console) console.log('MultiFile.addToList',slave_count);

                //# Trigger Event! onFileAppend
                MultiFile.trigger('FileAppend', slave, MultiFile, files);
                //# End Event!

                var names = $('<span/>');
                $.each(files, function (i, file) {
                    var v = String(file.name || ''),
                            S = MultiFile.STRING,
                            n = S.label || S.file || S.name,
                            t = S.title || S.tooltip || S.selected,
                            p = '<img class="MultiFile-preview" style="' + MultiFile.previewCss + '"/>',
                            label = $(
                                    (
                                        '<span class="MultiFile-label" title="' + t + '">' +
                                            '<span class="MultiFile-title">' + n + '</span>' +
                                            (MultiFile.preview || $(slave).is('.with-preview') ? p : '') +
                                        '</span>'
                                    )

So I tried to change above label bind using ternary if operator like follows

// Add a new file to the list
            MultiFile.addToList = function (slave, slave_count, files) {
                //if(window.console) console.log('MultiFile.addToList',slave_count);

                //# Trigger Event! onFileAppend
                MultiFile.trigger('FileAppend', slave, MultiFile, files);
                //# End Event!

                var names = $('<span/>');
                $.each(files, function (i, file) {
                    var v = String(file.name || ''),
                            S = MultiFile.STRING,
                            n = S.label || S.file || S.name,
                            t = S.title || S.tooltip || S.selected,
                            p = '<img class="MultiFile-preview" style="' + MultiFile.previewCss + '"/>',
                            label = $(
                                    (
                                        '<span class="MultiFile-label" title="' + t + '">' +
                                            '<span class="MultiFile-title">' + n.length > 30 ? n.substring(0, 30) + ".." : n + '</span>' +
                                            (MultiFile.preview || $(slave).is('.with-preview') ? p : '') +
                                        '</span>'
                                    )

changed line n.length > 30 ? n.substring(0, 30) + ".." : n

when I add that files not listing properly, how can I make this correct ?

Could something be put in the Readme (and preferably on the website) showing that the author is no longer supporting this? It looks like no issues have been addressed or pull requests accepted for a long time. Even www.fyneworks.com indicates they don't do jQuery plugins anymore.

HTML

<label for="uploadInput">Add Files</label>
<input id="uploadInput" type="file" multiple class="multi with-preview"></input>

CSS

#uploadInput {
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1;
}

This is a method allowing for the user to click the label and activate the corresponding input. Inputs are not style-able and this allows working-around that.

From what I can tell this plugin breaks the possibility of doing this (and uses id attributes incorrectly) by copying the id from the input and applying it to a generated container element as shown below.

<label for="uploadInput">Add Files</label>
<div class="MultiFile-wrap" id="uploadInput">
   <input id="uploadInput" type="file"></input>
</div>

Besides the fact that this breaks the for attribute pairing, if I'm correct id attributes are supposed to always be unique (never the same thing twice).

I'm going to look in there and try to find where this is happening and why, but thought I'd go ahead and open an issue up here. Thoughts?

Using Firefox, When select the second file for upload, the input file gets duplicated, the same happens on IE9.

Google Chrome works fine.

I attached one image for better view.

I am looking the document for the options in MultiFile. So far the only problem I have encountered has been the key/value pair is missing the key. Is there an option that includes the key?

I read the documentation and tried to make some changes, but it still fails, I would like to know how do I display a preview of the selected pictures

Hi!
Thank you for a great plugin. It works very well, except for the multilingual support and file list customization (both using the STRING property). I get the same behavior in your examples. Is there something wrong with my setup?

Tested on IE11 and Firefox ver37.

Regards
Bjørn Terje Svennes

Lots of random issues with MultiFile + Backbone Views, more specifically MultiFile is unable to append the list of files to the element in the current view. Will try to fork this project and add a fix to this myself.

setup MultiFile

$jq('#inputmultifile').MultiFile({ 
            STRING: {
             remove: '<span class="multifileicon ui-icon ui-icon-closethick" title="zum entfernen klicken"></span>'
            },
.....

initialising multifile remove is overwritten by default

MultiFile.STRING = $.extend(MultiFile.STRING || {}, $.fn.MultiFile.options.STRING, MultiFile.STRING);

this works

MultiFile.STRING = $.extend({}, $.fn.MultiFile.options.STRING, MultiFile.STRING);

Hi,

Great work, just what I needed!

Using it along with other utilities (as it is intended to), I faced a name clash:

The "maxlength" attribute is a standard HTML5 attribute to specify the maximum number of characters allowed in an element.
Granted, this should apply only to type text inputs, but this triggers some validation plugs (at least formvalidation.io), leading to unexpected results for a file input field.

Perhaps this attribute should be renamed data-maxlength (just like data-maxsize and data-maxfile) to avoid confusion.

Or as this utility is designed to be unobtrusive and work nicely with other utilities, perhaps its own namespace for attributes would be nice, something like data-mf-...

Hello.
I'm trying to change the name of the file uploaded.
I have changed the code in jquery.Multifile.js on the line 169 to always setting the file name to "something.jpg", but didn't work.
Anybody can help me?

Here is the code:

166   // set file name
167   file.name = " something.jpg";
168   // execute function in element's context, so 'this' variable is current element
169   rv = handler.apply(MultiFile.wrapper, [element, file.name, MultiFile, file]);

Hi,

thanks for your work, it is very useful.

If I am not mistaken, line 488 in jquery.MultiFile.js should be

if(i>0) names.append(', ');

(rather than i>1). As it is now, between the first and second entries there is no comma, if multiple files are selected together.

Ulrich

is there an option to add a class on the remove button..

Thanks for the file control can you please help me to remove the (,) commas or hide them, can't execute or manipulative with DOM that fails the file upload feature. Im using Angular js to save data

Thanks in advance

Currently there is no remove button for each file,

If i select 3 files all 3 files are bundled with single cross arrow which should not be the case.

Because of this code

if(o.max>1) MultiFile.E.attr('multiple','multiple').prop('multiple',true);

multiple-attribute is forced on input even if I am not interested in selecting more than one file at a time but still wants to enable uploading multiple files. My best guess would be to remove the line and let users manually put multiple on input-field if needed.

Is there any drag drop feature available for this plugin? or any way to integrate with other drag drop plugin?

In package.json change
"main": "index.html",
to
"main": "jquery.MultiFile.js",

I using this jquery multifile plugin, according to that we can select only one file at a time,

this is file input attribute of that
<input type="file" name="files" class="multi" onchange="return Plugins.handleFileSelect(this);"/>

Since I'm trying to select multiple files that can list each file with remove(X) icon at a time so I changed above input attribute like this

<input type="file" name="files" class="multi" onchange="return Plugins.handleFileSelect(this);" multiple="multiple"/>

Now I can select multiple files, but its not listing files with Remove("X") Icon

if I attached 2 files this is the view with inspect elements

https://i.stack.imgur.com/uzpsx.png

but its not listing two remove icons for each file in multiple file select

  $('.inputfile').MultiFile({
    max: 5,
    accept: 'jpg|png|gif|jpeg',
    list: '.inputfile-list',
    max_size: 2048,
  });

I found out that $.fn.MultiFile.options have maxsize option only.

So, when I swtiched from max_size (as on documentation page) to maxsize - I works.
Is it a typo or Im usuing it in a wrong way?

I'm trying to generate this file input dynamically

So I tried to append this once "click here" button click happens like follows

 <button type="button" id="ifile">click here</button>             
 <div id="target_div"></div> 

<script type="text/javascript">

    $('#ifile').click(function () {
        // when the add file button is clicked append
        // a new <input type="file" name="someName" />
        // to a target_div div
        $('#target_div').append(
            $('<input/>').attr('type', "file").attr('name', "file").attr('id', "someName").attr('class', "multi").attr('onchange', "return Plugins.handleFileSelect(this);")
        );
    });
</script>

but once I do this its generating ordinary file input but its not listing files properly

once I open inspect elements I can see a view like following

https://i.stack.imgur.com/noNpY.png

how can I generate multi input dynamically

Hi, when i put more than one file with this plugin just arrives one.

Someone knows what this can be?

Thanks

Can you put a link to the plugin web suite here
Publishing a version history on the web suite could also helpful

Dear Frind,
I was look for a upload tool that can mulit post and check the filesizs before
post to the server.
When test with your demo! Everything is ok but a bug at "Validating Sizes" .
Here is the step i do:
step 1:choose a file (less than 1M)
step 2:remove it
step 3:choose another file(less than 1M)
and then error occored Message "The File selected exceed the maximum size permited(1.3Mb>1024Kb)"

Hello!

I want to change the style of the input field like that.
I have added a wrap:
slave.addClass('MultiFile-applied').wrap("<span class='btn-wrapper'></span>");
but next input field appears in the previous wrap:
<span class='btn-wrapper'><input ...> <span class='btn-wrapper'><input ...> </span> </span>
How can I add a new file field after the previous wrapped file field?
<span class='btn-wrapper'><input ...></span> <span class='btn-wrapper'><input ...></span>

Hi,

When we select group of files, on the UI, it is shown as a list. Out of the selected files if I have to delete a single file; it is not possible. We have to delete the complete list and then add.

Can this be done?

Thanks,
Santosh

In IE8 if I try to add a forbidden file type the script fails with 'console' is undefined. This seems to be due to:

        if(console) console.log(s);

Should this be

        if(typeof console != 'undefined') console.log(s);

?

Hi all,
im new to the github..i want one help in my project . i need to delete each file which is seleceted while uploading.now i can delete all files in single click but i want to delete each and every file individually.
this file is part of the jquery.multifile.js.
thanks....

MultiFile.addToList = function (slave, slave_count, files) {
//if(window.console) console.log('MultiFile.addToList',slave_count);

                //# Trigger Event! onFileAppend
                MultiFile.trigger('FileAppend', slave, MultiFile, files);
                //# End Event!

                var names = $('<span/>');
                $.each(files, function (i, file) {
                    var v = String(file.name || '' ),
                            S = MultiFile.STRING,
                            n = S.label || S.file || S.name,
                            t = S.title || S.tooltip || S.selected,
                            p = '<img class="MultiFile-preview" style="'+ MultiFile.previewCss+' display:none;"/>',
                            label = $(
                                    (
                                        '<span class="MultiFile-label" title="' + t + '">'+
                                            '<span class="MultiFile-title">'+ n +'</span>'+
                                            (MultiFile.preview || $(slave).is('.with-preview') ? p : '' )+
                                        '</span>'
                                    )
                                    .replace(/\$(file|name)/gi, (v.match(/[^\/\\]+$/gi)||[v])[0])
                                    .replace(/\$(ext|extension|type)/gi, (v.match(/[^\.]+$/gi)||[''])[0])
                                    .replace(/\$(size)/gi, sl(file.size || 0))
                                    .replace(/\$(preview)/gi, p)
                            );

                    // now supports preview. Just add an image with class preview to the "file" string
                    label.find('img.MultiFile-preview').each(function(){
                        var t = this;
                        var oFReader = new FileReader();
                        oFReader.readAsDataURL(file);
                        oFReader.onload = function (oFREvent) {
                            t.src = oFREvent.target.result;
                        };
                    });

                    // append file label to list
                    if(i>1) names.append(', ');
                    names.append(label);

                });

                //$.each(files, function (i, file) {
                    // Create label elements
                    var
                        r = $('<div class="MultiFile-label"></div>'),
                        b = $('<a class="MultiFile-remove" href="#' + MultiFile.wrapID + '">' + MultiFile.STRING.remove + '</a>')
                            .click(function () {

                                //# Trigger Event! onFileRemove
                                MultiFile.trigger('FileRemove', slave, MultiFile, files);
                                //# End Event!

                                MultiFile.n--;
                                MultiFile.current.disabled = false;

                                // Remove element, remove label, point to current
                                MultiFile.slaves[slave_count] = null;
                                $(slave).remove();
                                $(this).parent().remove();

                                // Show most current element again (move into view) and clear selection
                                $(MultiFile.current).css({
                                    position: '',
                                    top: ''
                                });
                                $(MultiFile.current).reset().val('').attr('value', '')[0].value = '';

                                // rebuild array with the files that are left.
                                var newfs = [];
                                for (var x in MultiFile.slaves) {
                                    var f = MultiFile.slaves[x];
                                    if(f!=null && f!=undefined){
                                        var files = ((f.files&&f.files.length) ? f.files : null) || [{
                                                    name: this.value,
                                                    size: 0,
                                                    type: ((this.value || '').match(/[^\.]+$/i) || [''])[0]
                                                }];
                                        // make a normal array
                                        $.each(files, function (i, file) {
                                            if(file.name!=undefined)
                                                newfs[newfs.length] = file;
                                        });
                                    };
                                };
                                MultiFile.files = newfs;

                                //# Trigger Event! afterFileRemove
                                MultiFile.trigger('afterFileRemove', slave, MultiFile, files);
                                //# End Event!

                                //# Trigger Event! onFileChange
                                MultiFile.trigger('FileChange', slave, MultiFile, MultiFile.files);
                                //# End Event!

                                return false;
                            });

                    // Insert label
                    MultiFile.list.append(
                        r.append(b, ' ', names)
                    );

                //}); // each file?

                //# Trigger Event! afterFileAppend
                MultiFile.trigger('afterFileAppend', slave, MultiFile, files);
                //# End Event!

                //# Trigger Event! onFileChange
                MultiFile.trigger('FileChange', slave, MultiFile, MultiFile.files);
                //# End Event!

            }; // MultiFile.addToList
            // Add element to selected files list



            // Bind functionality to the first element
            if (!MultiFile.MultiFile) MultiFile.addSlave(MultiFile.e, 0);

            // Increment control count
            //MultiFile.I++; // using window.MultiFile
            MultiFile.n++;

            // Save control to element
            MultiFile.E.data('MultiFile', MultiFile);


            //#####################################################################
            // MAIN PLUGIN FUNCTIONALITY - END
            //#####################################################################
        }); // each element
};

Hi
I'm new one for jquery, I need to show the images after uploaded the file using the PHP, The selected files in session or any other ways.. How can I show the selected files after page refresh or uploaded using the PHP? Please guide me to show the uploaded images after page refresh in list of multi file upload section.

When I remove a file, the script resets the "top" and "position" css-properties to empty. So if the original input had custom top/position specified - it is lost after removing. You should probably back them up and restore on remove.

adding a file named <script>alert('test') breaks multifile with Uncaught SyntaxError: Invalid regular expression flags. A file named <script>alert('test')<:script> fails with Uncaught SyntaxError: Unexpected token :.

can you populates the file list wrapper in a custom element too?
(same like wrapper for the list)

// Create wrapper to hold our file list
MultiFile.wrapID = MultiFile.instanceKey + '_wrap'; // Wrapper ID?
MultiFile.E.wrap('<div class="MultiFile-wrap" id="' + MultiFile.wrapID + '"></div>');
MultiFile.wrapper = $('#' + MultiFile.wrapID + '');