Only upload one file

[aentan]

I want thew plugin to behave exactly like a single file field. Thus if you choose a file a preview appears and then you choose a file again, instead of a second preview appearing it overwrites the first one. I'm using this for a avatar uploader and it doesn't make sense to be able to upload multiple avatars.

[jmxfield]

Not any help sorry aentan but just wanted to add that I agree this would make a lot of sense for a single file upload, and a welcome alteration to plugin.

[Kaimite]

Hello,

If you want you can use the param : maxNumberOfFiles

$('#fileupload').fileupload({maxNumberOfFiles: 1});

But if the user want to upload a new avatar he must delete the old one and upload the new one.
The new upload wil not replace the old one. I'm looking for an issue.

Kaimite

[cowwoc]

There is also the matter of the user interface. I'd like to get a single "Upload" button with a status bar under it (that appears only after an upload begins) showing the filename and progress bar. I don't think we need all the other buttons.

[Kaimite]

you can remove the differents buttons in the control bar :

<div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Choose your file...</span>
                <input type="file" name="files[]" id="files"  multiple="multiple"/>
            </label>
</div>

[aentan]

My issue is still unresolved.

This is quite important for the plugin to be used for web apps. The most common use case is uploading avatars and having the table interface is just overkill. Not being able to be simple is a ridiculous flaw of this plugin!

[Kaimite]

Hello,
Sorry but i'm not very good in english. You want upload only one file and save the filename in a database ?

Kaimite

[vicmosin]

Seems that I have the same problem here: #519
Is there any way to delete the previous selected file programatically?

[uliuli]

Hey,

has anyone figured this out yet? I was trying to do the same thing and came up with a solution that works, but it's a bit hacky, so please feel free to post a better way.

I couldn't find a way to clear the upload queue before adding a new file, so what I did is adjust the preview manually in the add callback and only submit the last file that was added by unbinding all previous click events from my submit button (I'm using the basic version of the plugin).

add: function (e, data) {                                                

        //show file preview (overwriting previous preview)
        $.each(data.files, function (index, file) {
            $('.file_preview').html('<p>'+file.name+'</p>');  
        });

        //unbind existing submit triggers, because we only use the file that was selected last 
        $('.start').unbind('click');

        //bind submit to start button
        $('.start').click(function(){
            jqXHR = data.submit();
            return false;
        }); 
    }

[amid2887]

Hi.
I solved this "avatar problem" like that:
At first I rewrite method name "adjustMaxNumberOfFiles" in the jquery.fileupload-ui.js to the "adjustMaxNumberOfFiles" ( just delete "" symbol ).
And the next step is call renamed API method in the getJSON ( load actual avatar ) section:

$('#fileuploader').fileupload({
...,
maxNumberOfFiles: 1,
...
}).each(function () {
        var that = this;
        $.getJSON(this.action, function (result) {
          if (result && result.length) {
            $(that).fileupload('option', 'done')
              .call(that, null, {result: result});

            $(that).fileupload('adjustMaxNumberOfFiles', -result.length);

          }
        });
      });;

PS: if someone will be do that more smartly, please tell me....

[SirSteve]

I agree there should be a way to set an option for single uploads easily (and have it act like a standard upload field by replacing the other image)

[blueimp]

Please read:
https://github.com/blueimp/jQuery-File-Upload#support

[dotnetwise]

Still no out of the box - one-file-only replacement for the standard input type file?
I'd like to have something very simple:

$('#fileuploader').fileupload({
   ...,
   basic: true,
   maxNumberOfFiles: 1,//this should be enforced automatically when basic is true, regardless of what you're specifying in here
   ...
})

[dshahin]

I'm not sure if this is the best method, but here's what I do, and it works well:

$('#fileupload').bind('fileuploadadd', function(e,data){
    console.log('added files');
    $('button.cancel').each(function(){
        $(this).click();
    });
});

[noobthinker]

html tag: input type="file" id="fileupload" (not include multiple)
script on :
.on('fileuploadadd', function (e, data) {
if(!data.fileInput.context.multiple){
$('#files').html("");
}
data.context = $('

').appendTo('#files');