Preview files in a folder in bootstrap-fileinput

Web Tips Q & ACategory: Krajee PluginsPreview files in a folder in bootstrap-fileinput
kelumkp asked 1 year ago

I want to edit some record that has list of files which previously uploaded by bootstrap-fileInput.
So I have to preview files in folder to bootstrap-fileinput. This is the location that files are located:

C://Users/kelum/Documents/Visual Studio 2015/Projects/rootProject/project_name/project_name/Content/Essential_Folder/attachments_AR/01/

 As an example I have file call sam.png So I tried to show it like below 

initialPreview: [
"<img style='height:160px' src='file:///C://Users/kelum/Documents/Visual Studio 2015/Projects/rootProject/project_name/project_name/Content/Essential_Folder/attachments_AR/01/sam.png'>"
]

 
but its not giving proper preview here. this is how it looks like. If I’m not clear enoguh, here is what I did from scratch, this is HTML for bootstrap-fileinput

<input id="idd" type="file" multiple=true class="file-loading">

script I used to show files

$("#idd").fileinput({
type: 'POST',
cache: true,
uploadUrl: '@Url.Action("UploadFiles", "Home")', // server upload action
overwriteInitial: false,
uploadExtraData: {foldertype: "marketing_materials_EN"},
minFileCount: 1,
maxFileCount: 5,
initialPreview: [
"<img style='height:160px' src='file:///C://Users/kelum/Documents/Visual Studio 2015/Projects/rootProject/project_name/project_name/Content/Essential_Folder/attachments_AR/01/sam.png'>"
],
});
1 Answers
Kartik Staff answered 1 year ago

You may want to read general HTML documentation and browser specific security considerations before proceeding with what you are trying.The link must be accessible via a web server. The file:// protocol is supported by most browsers only for local html files and not for files served via webserver. Refer a similar discussion on SFO

kelumkp replied 1 year ago

<p>How to generate a links for each file in a specific folder that accessible via a web server.Okay lets say I wrote a method that can generate links for each file , then how I refer those links inside <em>initialPreview</em></p>

Kartik Staff replied 1 year ago

@kelumkp as mentioned — you need to store your files on the webserver where they are accessible via a normal URL link (for example http://yoursite.com/uploads) … or you can write a server procedure to read the file stored in a database and return a link and point the links there…<br><br>Your server code must return the javascript array for use within initialPreview<br>

kelumkp replied 1 year ago

could you please look at below post and let me know where should I configure this

Kartik Staff replied 1 year ago

In whatever view file you are rendering the HTML output (i.e. the file input markup etc.) – in the same place you must embed the server generated javascript based on these image list values from the server.

kelumkp replied 1 year ago

I need to exactly similar thing like this http://plugins.krajee.com/file-input-ajax-demo/5 But its in PHP , How to do it using asp.net mvc 5 ? , this is what I did upto now https://bitbucket.org/snippets/Common_Admin/nLrMGI need to configure this

Login or register to contribute or comment.

Login   Register