jaysalvat / ezdz

A jQuery plugin to turn any standard input type file into a nice drag & drop zone with validators and previews.
MIT License
89 stars 36 forks source link

Image Preview not Working #10

Closed chlebta closed 8 years ago

chlebta commented 9 years ago

Hello, this is my code :


$('#brandLogo').ezdz({
                text: 'drop the logo',
                preview:'http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-ff7efb8e-d7dc-4ace-b789-53df51de9b08-Samsung.jpg',
                validators: {
                    maxWidth: 400,
                    maxHeight: 200
                },

                reject: function(file, errors) {
                    if (errors.mimeType) {
                        alert(file.name + ' must be an image');
                    }
                    if (errors.maxWidth) {
                        alert(file.name + ' must be width:400px max');
                    }
                    if (errors.maxHeight) {
                        alert(file.name + ' must be height:200px max');
                    }
                }
            });

No image preview is shown in the dropzone ?

jaysalvat commented 9 years ago

Hello, your image file returns:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>F6E154917DF3896B</RequestId>
<HostId>2IxCDvH5fycbbTGAX9Qsy+VrjVTPL25IFWdS0DJRNrDIBrYc0m2RSObR94PhpEQk</HostId>
<wappalyzerData id="wappalyzerData" style="display: none"/>
<script id="wappalyzerEnvDetection" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"/>
</Error>
chlebta commented 9 years ago

Hello, Nope it works fine : http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-ff7efb8e-d7dc-4ace-b789-53df51de9b08-Samsung.jpg

Sentence commented 9 years ago

Same issue here. (Lack of fully documentation i think. :smile:)

jaysalvat commented 9 years ago

Hello,

I guess it's a CORS issue. Picture must be on the same domain. Is it the case?

Sentence commented 9 years ago

Picture on the same domain. Cheked the source code, but need to work about the first view, so idk why i cannot get any response at console, network, etc.

ChazyTheBest commented 8 years ago

Same problem here, the preview option it's not working:

$('input[type="file"]').each(function(i) {
    var folder = parseInt(getUrlParameter('id')) + '/',
        image = (i + 1) + '.jpg';
    $(this).ezdz({
        text: 'Arrastrar imagen',
        preview: 'http://www.website.com/images/' + folder + image
    });
});

No image is shown in the box... Only the text.

It's not a CORS issue. I'll take a look when I have some free time.

jaysalvat commented 8 years ago

Did you try the method?

$('[type="file"]').ezdz('preview', 'img/previously-uploaded-logo.png');
ChazyTheBest commented 8 years ago

It's working that way! Thanks!

Sentence commented 8 years ago

Works, but cannot setup with init. This is a hacky way for dinamically preview, works fine, but totally unnecessary, cause this is an issue, that you cannot close.

$('input[type="file"]').ezdz({
    text: "Dummy",
    className: "dummy_dropzone"
});

$('input[type="file"]').each(function(){
    $(this).ezdz('preview', $(this).data("preview"));
});
jaysalvat commented 8 years ago

Hello @Sentence

Are we talking about this: https://github.com/jaysalvat/ezdz#value I think it's what you need.

It can be set at init with:

 <input type="file" name="file" data-value="image.jpg" />

or

$('.upload').ezdz({
    value: 'image.jpg'
});