Uploading files and refreshing my list of files


#1

I have a page with an uploader (http://www.dropzonejs.com) at the top of the page. Directly under it I have a list of files that are currently in my ‘upload’ directory. I would like to update the list if files when a file has been uploaded successfully using Dropdown’s success event.

This is what I have so far.

Ember.$("div#my-awesome-dropzone").dropzone({ 
		url: "http://localhost:3000",
		addRemoveLinks: true,
		previewContainer: true,
		drop: function(event, err) {
			console.log('dropped');
		},
		sending: function(file, xhr, formData) {
			console.log('SENDING: ');
			console.log(file);
			Ember.$("<span id='123'></span><span>%</span>").appendTo(".dz-details");
		},
		uploadprogress: function(file, progress, err) {
			Ember.$('#123').text(Math.round(progress));
		},
		success: function(file, res) {
			console.log(file.name + ' successfully uploaded');
			console.log(res);
                            // HOW CAN I UPDATE  MY LIST OF FILES HERE?
		}
	});

#2

What do you call to get a list of files and where are you calling it? Can you post some code in a jsbin for us?


#3

I’ll try to get a jsbin working for this but in the meantime this is what I have so far.

– Template: application.hbs –

<h2 id="title"></h2>
<div class="container">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
		</div>
		<div class="panel-body">
			<div id="dropzone" style="visible: hidden;">
				<div id="my-awesome-dropzone" class="dropzone">
					{{!-- <div class="fallback">
						<input name="file" type="file" multiple />
					</div> --}}
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container">
	<div class="well">
		<h3 class="text-center">Files</h3>
		<hr style="display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;" />
		<ul id="files">
		{{#each file in model}}
			<li>{{file}}</li>
		{{/each}}
		</ul>
	</div>
</div>
{{outlet}}

– Route: application.js –

model: function() {
	return Ember.$.getJSON('http://localhost:3000', function(data) {
		return data;
	});
}

– View: application.js –

didInsertElement: function() {
	Ember.$("div#my-awesome-dropzone").dropzone({ 
		url: "http://localhost:3000",
		addRemoveLinks: true,
		previewContainer: true,
		success: function(file, res) {
			// UPDATE LIST OF FILES HERE?
		}
	});
}

I’m using Dropzone.js as my uploader. The model hook in my route returns a list of files in my ‘upload’ directory on the server. So what I’m attempting to do is…after a file is successfully uploaded, update my list of files.


#4

I’ve posted some code for you. It works, but you’ll have to wire up the specifics the way you’d like.


#5

Thanks atsjj. That worked perfectly.