[SOLVED] How to auto load images?

[robinlebon]

How can I preload images into the upload area when the page is loaded or refreshed? Let's say I have two images:

$pic1 = "uploads/photo.jpg"; $pic2 = "uploads/anotherphoto.jpg";

I want them to auto load every time the page is loaded or refreshed. If max_files_count is set to 5, there will be 3 slots available for more images, in this example. Thanks

[lonepalmus]

I second this.. I am using this on an edit page.. so it should be possible to load already uploaded photos.. Did you find a solution for this?

[robinlebon]

hi, not yet, but i believe it must be something simple as:

$('#uploader').on("ready", function() { 
    uploader.addFile('filename.jpg');
});

however this isn't working :(

[jayarjo]

That is not possible currently. At least not with bundled widgets. One could probably build custom implementation... I'm not sure how would you retain file references between page reloads though?

[Arantor]

Between page reloads presumes it's already on the server and you're just passing through some metadata between server and client so the next stage of process is aware of the files. But it would have to be a custom implementation.

[robinlebon]

i managed to make it work with only 15 lines of code, using the addfile method thanks

[sandeepts]

I am facing some issue on this. I have used init FilesAdded to load existing images. Here is scenario i am trying to achieve.

When page loaded, I want to show few images loaded.

1. I upload images for example: person. it works fine
2. Now i want to allow user to delete , add new images which are located at some location on machine. the issue is that it won;t get displayed in filelist area.

Do you have any suggestion or code snippet for the same?

[robinlebon]

here's the magic code:

$(document).ready(function(){ // AUTO LOAD IMAGES
    plupload = $("#uploader").plupload('getUploader');
    var img = new mOxie.Image();
    var url = o.resolveUrl("folder/image.jpg");
    img.onload = function() {
        plupload.addFile(img.getAsBlob());
    }
    img.load(url);
});

[robinlebon]

you must first initialize the widget use the documentation example then you can place my code AFTER that

[hassanuos]

here's the magic code:

$(document).ready(function(){ // AUTO LOAD IMAGES
    plupload = $("#uploader").plupload('getUploader');
    var img = new mOxie.Image();
    var url = o.resolveUrl("folder/image.jpg");
    img.onload = function() {
        plupload.addFile(img.getAsBlob());
    }
    img.load(url);
});

@robinlebon i am facing this issue can you please share the url mOxie i am using these below URLs and i am get this error.

Uncaught ReferenceError: mOxie is not defined

[robinlebon]

@robinlebon i am facing this issue can you please share the url mOxie i am using these below URLs and i am get this error.

Uncaught ReferenceError: mOxie is not defined

First of all, I believe you are referencing to the wrong scripts. Download PLUpload and install it to your server root, instead of calling it remotely. Be sure all files are correctly installed.

Second, make a reference to these scripts in your HTML code: <link rel="stylesheet" href="plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" /> <script type="text/javascript" src="plupload/js/plupload.full.min.js"></script> <script type="text/javascript" src="plupload/js/jquery.ui.plupload/jquery.ui.plupload.js"></script>

Third, initialize the widget. See the example at https://www.plupload.com/examples. You must add a script that should look like this: <script type="text/javascript"> // Initialize the widget when the DOM is ready // code goes here </script>

Fourth, create another JS script AFTER the initialization one and put my code on it. Make the appropriate adjustments for your filenames and folders.

Hope this helps.

[hassanuos]

@robinlebon i am facing this issue can you please share the url mOxie i am using these below URLs and i am get this error.

Uncaught ReferenceError: mOxie is not defined

First of all, I believe you are referencing to the wrong scripts. Download PLUpload and install it to your server root, instead of calling it remotely. Be sure all files are correctly installed.

Second, make a reference to these scripts in your HTML code: <link rel="stylesheet" href="plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" /> <script type="text/javascript" src="plupload/js/plupload.full.min.js"></script> <script type="text/javascript" src="plupload/js/jquery.ui.plupload/jquery.ui.plupload.js"></script>

Third, initialize the widget. See the example at https://www.plupload.com/examples. You must add a script that should look like this: <script type="text/javascript"> // Initialize the widget when the DOM is ready // code goes here </script>

Fourth, create another JS script AFTER the initialization one and put my code on it. Make the appropriate adjustments for your filenames and folders.

Hope this helps.

Same issue.

Uncaught ReferenceError: mOxie is not defined

if you say i can share the code here.