createObjectURL in dialog

[sky-t]

Hi there,

i want to show previews of uploaded files.
When i use

                var url = URL.createObjectURL(fileStore[j]);
                $('#preview').dialog({
                    fit: true,
                    inline: true,
                    href: URL.createObjectURL(fileStore[j])
                });
                $('#preview').dialog('open');

it does not work
GET blob:http://192.168.0.34/85dfe01b-c22c-4905-a882-51b44588c358?_=1544437911057 net::ERR_FILE_NOT_FOUND

but if i use

                var url = URL.createObjectURL(fileStore[j]);
                window.open(url);

the content is shown in new browser tab.

How can i fix that so i can show i dialog box rather then a new tab?


Thanks a lot

[stworthy]

This is the code that shows how to preview the image on a dialog.

Code:

<div id="dlg" class="easyui-dialog" title="Basic Dialog" style="width:400px;height:200px;padding:10px">
    <input class="easyui-filebox" data-options="
        width: '100%',
        accept: 'image/*',
        onChange: function(){
            var files = $(this).filebox('files');
            var url = window.URL.createObjectURL(files[0]);
            $('#img').attr('src',url)
        }
    ">
    <img id="img">
</div>

[sky-t]

Hi stworthy,

thank you for your reply.
This should work not only with images and the content came from the FileAPI.

Is there a way to show the single FileAPI - Object in a dialog?

[stworthy]

Once you get the File object, you can use the FileReader to read the file content.

Code:

var file = $(this).filebox('files')[0];
var reader = new FileReader();
reader.onload = (function(file){
    return function(e){
        console.log(e.target.result)
    }
})(file)
reader.readAsText(file);