Merge pull request #556 from edx/will/file-upload-js-cleanup

Simplify JavaScript file upload interface and clean up analytics events

openassessment/xblock/static/js/spec/oa_file_upload.js

@@ -2,13 +2,12 @@ describe("OpenAssessment.FileUploader", function() {
 
     var fileUploader = null;
     var TEST_URL = "http://www.example.com/upload";
-    var TEST_IMAGE = {
+    var TEST_FILE = {
         data: "abcdefghijklmnopqrstuvwxyz",
         name: "test.jpg",
         size: 10471,
         type: "image/jpeg"
     };
-    var TEST_CONTENT_TYPE = "image/jpeg";
 
     beforeEach(function() {
         fileUploader = new OpenAssessment.FileUploader();
@@ -25,15 +24,24 @@ describe("OpenAssessment.FileUploader", function() {
         spyOn(Logger, 'log');
 
         // Upload a file
-        fileUploader.upload(TEST_URL, TEST_IMAGE, TEST_CONTENT_TYPE);
+        fileUploader.upload(TEST_URL, TEST_FILE);
+
+        // Verify that a PUT request was sent with the right parameters
+        expect($.ajax).toHaveBeenCalledWith({
+            url: TEST_URL,
+            type: 'PUT',
+            data: TEST_FILE,
+            async: false,
+            processData: false,
+            contentType: 'image/jpeg'
+        });
 
         // Verify that the event was logged
         expect(Logger.log).toHaveBeenCalledWith(
             "openassessment.upload_file", {
-                contentType: TEST_CONTENT_TYPE,
-                imageName: TEST_IMAGE.name,
-                imageSize: TEST_IMAGE.size,
-                imageType: TEST_IMAGE.type
+                fileName: TEST_FILE.name,
+                fileSize: TEST_FILE.size,
+                fileType: TEST_FILE.type
             }
         );
     });

openassessment/xblock/static/js/spec/oa_response.js

@@ -50,12 +50,11 @@ describe("OpenAssessment.ResponseView", function() {
         this.uploadError = false;
         this.uploadArgs = null;
 
-        this.upload = function(url, data, contentType) {
+        this.upload = function(url, data) {
             // Store the args we were passed so we can verify them
             this.uploadArgs = {
                 url: url,
                 data: data,
-                contentType: contentType
             };
 
             // Return a promise indicating success or error
@@ -421,7 +420,6 @@ describe("OpenAssessment.ResponseView", function() {
         view.fileUpload();
         expect(fileUploader.uploadArgs.url).toEqual(FAKE_URL);
         expect(fileUploader.uploadArgs.data).toEqual(files[0]);
-        expect(fileUploader.uploadArgs.contentType).toEqual('image/jpg');
     });
 
     it("displays an error if a one-time file upload URL cannot be retrieved", function() {

openassessment/xblock/static/js/src/oa_file_upload.js

@@ -8,38 +8,32 @@ PUT requests on the server.
 
 Args:
     url (string): The one-time URL we're uploading to.
-    imageData (object): The object to upload, which should have properties:
-        data (string)
-        name (string)
-        size (int)
-        type (string)
-    contentType (string): The MIME type of the data to upload.
+    file (File): The HTML5 file reference.
 
 Returns:
     JQuery promise
 
 */
 OpenAssessment.FileUploader = function() {
-    this.upload = function(url, imageData, contentType) {
+    this.upload = function(url, file) {
         return $.Deferred(
             function(defer) {
                 $.ajax({
                     url: url,
                     type: 'PUT',
-                    data: imageData,
+                    data: file,
                     async: false,
                     processData: false,
-                    contentType: contentType,
+                    contentType: file.type,
                 }).done(
                     function(data, textStatus, jqXHR) {
                         // Log an analytics event
                         Logger.log(
                             "openassessment.upload_file",
                             {
-                                contentType: contentType,
-                                imageName: imageData.name,
-                                imageSize: imageData.size,
-                                imageType: imageData.type
+                                fileName: file.name,
+                                fileSize: file.size,
+                                fileType: file.type
                             }
                         );
 

openassessment/xblock/static/js/src/oa_response.js

@@ -466,7 +466,7 @@ OpenAssessment.ResponseView.prototype = {
         this.server.getUploadUrl(view.imageType).done(
             function(url) {
                 var image = view.files[0];
-                view.fileUploader.upload(url, image, view.imageType)
+                view.fileUploader.upload(url, image)
                     .done(function() {
                         view.imageUrl();
                         view.baseView.toggleActionError('upload', null);