Valums file uploader drag drop area change

Question

I have a button and a drag drop area. I want to apply valums file uploader to this button. But want to keep the drag drop area as another box besides it. How do I achieve it? My current implementation is as follows:

         that.imageUploader = new qq.FileUploaderBasic({
                button: $('#sprPictureUpload')[0],
                action: '/ui/rest/utils/upload/image/file',
                allowedExtensions:SUPPORTED_IMAGE_TYPES,
                forceMultipart: true,
                multiple: config.multiple,
                inputName: 'photoFile',
                onSubmit: function(id, fileName) {
                    renderImagePlaceHolders.call(that, id, fileName);
                },

            });

And the html looks like the following:

<section class="upload-section" data-section="upload">
    <div class="upload-area">
        <div style="">
            <h3 style="color:#aaa">
                Drag images here
            </h3>
            <h5 style="color:#aaa"> or if you prefer ...</h5>
            <a id="sprGenericPictureUpload" class="btn btn-primary">
                <i class="icon-upload icon-white"></i> Choose image to Upload 
            </a>
        </div>
    </div>
</section>

So what I would like is click on #sprPictureUpload and drag anywhere in the .upload-area section should initiate photo upload. Also is there a way to apply uploader to two different elements with the same config?

This will be much easier if you don't use FineUploaderBasic. Why not use FineUploader mode, which gives you all of the DnD code? You can also add additional drop zones, disable the default one, etc. — Ray Nicholus, Mar 09 '13 at 03:27

score 1 · Answer 1 · edited Jul 09 '13 at 20:24

1

I would suggest not using FineUploaderBasic and using FineUploader mode instead. FineUploader mode gives you drag n drop functionality.

FineUploader Mode documentation is here:

http://docs.fineuploader.com/integrating/modes/fineuploader.html

edited Jul 09 '13 at 20:24

Ray Nicholus

19,538
14
59
82

answered Mar 12 '13 at 18:51

JNo

395
1
4

Valums file uploader drag drop area change

1 Answers1