Print Page - createObjectURL in dialog

Title: createObjectURL in dialog
Post by: sky-t on December 10, 2018, 03:35:16 AM

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

Title: Re: createObjectURL in dialog
Post by: stworthy on December 10, 2018, 08:04:40 PM

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>

Title: Re: createObjectURL in dialog
Post by: sky-t on December 10, 2018, 10:45:02 PM

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?

Title: Re: createObjectURL in dialog
Post by: stworthy on December 11, 2018, 11:52:37 PM

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);

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: sky-t on December 10, 2018, 03:35:16 AM