flowjs / ng-flow

Flow.js html5 file upload extension on angular.js framework
http://flowjs.github.io/ng-flow/
MIT License
1.38k stars 303 forks source link

Bind array of Image URL's to Flow files #280

Closed nmarcetic closed 8 years ago

nmarcetic commented 8 years ago

Hi folks,

First of all, thanks for this great module.

I have a problem with binding images fetched from my API, I am saving only the URL's of images, so when I fetch the image gallery from API I have just array of URL's (Uploaded to S3 with ng-flow and only URL is saved for each image ). Now when I fetch the array of URL's I want to show it in $flow.files (as they where just now uploaded). So the idea is :) Upload gallery to S3 (it already works) , save the URL's only (works), fetch the URL's array from my API (works), show it with ng-flow (e.g like gallery preview with option to remove already uploaded images and upload new one).

Any idea is more then welcome, Thanks!

nmarcetic commented 8 years ago

Solved! What I do, I totally avoid binding URL to flow object. I Use two ng-repeats in view (both loops styling looks the same) one loops true my strings of URL's (e.g that's already uploaded images, so you have preview when you open the page) and second one loops over flow.files array but with ng-show="file.isUploading()" so basically I am showing the flow.files loop only when file is uploading (to be able to show progress bar and upload process with img thumb) when upload is finished, flow file is hidden and URL (uploaded file url from S3, Is pushed to array on flow.file upload success) and my ng-repeat is shown (the new uploaded file). So very simple show/hide method but it works awesome. Also I added drag and drop with angular-ui/ui-sortable and I am able to sort my images ;)

This is very specific problem and its not fully related to ng-flow , but its very interesting and maybe will help to someone. I am closing this one.

Thanks again for awesome module! Cheers