Commit 8d75c779 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Implemented file delete.

parent 9f0da3ae
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global $ */
/* global EventEmitter */
/* @depend QfqEvents.js */
var QfqNS = QfqNS || {};
(function (n) {
'use strict';
n.FileDelete = function (formSelector, targetUrl, sip) {
this.formSelector = formSelector;
this.targetUrl = targetUrl;
// TODO: make sip part of url or button element
this.sip = sip;
this.eventEmitter = new EventEmitter();
this.setupOnClickHandler();
};
n.FileDelete.prototype.on = n.EventEmitter.onMixin;
n.FileDelete.prototype.setupOnClickHandler = function () {
$(this.formSelector + " button.delete-file").click(this.buttonClicked.bind(this));
};
n.FileDelete.prototype.buttonClicked = function (event) {
var alert = new n.Alert("Do you want to delete the file?", "warning", "okcancel");
alert.on('alert.ok', function () {
this.performFileDelete(event);
}.bind(this));
alert.show();
};
n.FileDelete.prototype.performFileDelete = function (event) {
this.eventEmitter.emitEvent('filedelete.started', n.EventEmitter.makePayload(event.target, null));
var data = this.prepareData(event.target);
$.ajax({
url: this.targetUrl,
type: 'POST',
data: data,
processData: false,
cache: false
})
.done(this.ajaxSuccessHandler.bind(this, event.target))
.fail(this.ajaxErrorHandler.bind(this, event.target));
};
n.FileDelete.prototype.prepareData = function (htmlButton) {
if (!htmlButton.hasAttribute("name")) {
throw new Error("File delete button element requires 'name' attribute");
}
var fileDeleteName = htmlButton.getAttribute('name');
var data = new FormData();
data.append('s', this.sip);
data.append('name', fileDeleteName);
return data;
};
n.FileDelete.prototype.ajaxSuccessHandler = function (uploadTriggeredBy, data, textStatus, jqXHR) {
var eventData = n.EventEmitter.makePayload(uploadTriggeredBy, data, {
textStatus: textStatus,
jqXHR: jqXHR
});
this.eventEmitter.emitEvent('filedelete.delete.successful', eventData);
this.eventEmitter.emitEvent('filedelete.ended', eventData);
};
n.FileDelete.prototype.ajaxErrorHandler = function (uploadTriggeredBy, jqXHR, textStatus, errorThrown) {
var eventData = n.EventEmitter.makePayload(uploadTriggeredBy, null, {
textStatus: textStatus,
errorThrown: errorThrown,
jqXHR: jqXHR
});
this.eventEmitter.emitEvent('filedelete.delete.failed', eventData);
this.eventEmitter.emitEvent('filedelete.ended', eventData);
};
})(QfqNS);
\ No newline at end of file
......@@ -22,12 +22,14 @@ var QfqNS = QfqNS || {};
* @param fileUploadTo {string} url used for file uploads
* @constructor
*/
n.QfqForm = function (formId, submitTo, deleteUrl, dataRefreshUrl, fileUploadTo) {
n.QfqForm = function (formId, submitTo, deleteUrl, dataRefreshUrl, fileUploadTo, fileDeleteUrl) {
this.formId = formId;
this.submitTo = submitTo;
this.deleteUrl = deleteUrl;
this.dataRefreshUrl = dataRefreshUrl;
this.fileUploadTo = fileUploadTo;
this.fileDeleteUrl = fileDeleteUrl;
this.form = new n.Form(this.formId);
// This is required when displaying validation messages, in to activate the tab, which has validation issues
this.bsTabs = null;
......@@ -52,13 +54,21 @@ var QfqNS = QfqNS || {};
this.fileUploader = new n.FileUpload('#' + this.formId, this.fileUploadTo, this.getSip());
this.fileUploader.on('fileupload.started', this.startUploadHandler);
this.fileUploader.on('fileupload.upload.success', this.fileUploadSuccessHandler);
this.fileUploader.on('fileupload.upload.successful', this.fileUploadSuccessHandler);
this.fileUploader.on('fileupload.upload.failed',
function (obj) {
n.Helper.showAjaxError(null, obj.textStatus, obj.errorThrown);
});
this.fileUploader.on('fileupload.ended', this.endUploadHandler);
this.fileDeleter = new n.FileDelete("#" + this.formId, this.fileDeleteUrl, this.getSip());
this.fileDeleter.on('filedelete.delete.successful', this.fileDeleteSuccessHandler);
this.fileDeleter.on('filedelete.delete.failed',
function (obj) {
n.Helper.showAjaxError(null, obj.textStatus, obj.errorThrown);
});
};
n.QfqForm.prototype.on = n.EventEmitter.onMixin;
......@@ -71,6 +81,33 @@ var QfqNS = QfqNS || {};
this.bsTabs = bsTabs;
};
/**
* @private
*/
n.QfqForm.prototype.fileDeleteSuccessHandler = function (obj) {
if (!obj.data.status) {
throw Error("Response on file upload missing status");
}
if (obj.data.status === "error") {
var alert = new n.Alert(obj.data.message, "error");
alert.show();
return;
}
var $button = $(obj.target);
$button.prop("disabled", true);
var $buttonParent = $button.parent();
$buttonParent.addClass('hidden');
var $inputFile = $buttonParent.siblings(':file');
$inputFile.prop("disabled", false);
$inputFile.removeClass('hidden');
$inputFile.val("");
};
/**
* @private
*/
......@@ -82,7 +119,24 @@ var QfqNS = QfqNS || {};
if (obj.data.status === "error") {
var alert = new n.Alert(obj.data.message, "error");
alert.show();
return;
}
var $fileInput = $(obj.target);
$fileInput.prop("disabled", true);
$fileInput.addClass("hidden");
var $deleteContainer = $fileInput.siblings('div.uploaded-file');
var fileNamesString = obj.target.files[0].name;
var $fileNameSpan = $deleteContainer.find("span.uploaded-file-name");
$fileNameSpan.empty().append(fileNamesString);
var $deleteButton = $deleteContainer.find("button");
$deleteButton.prop("disabled", false);
$deleteContainer.removeClass("hidden");
};
/**
......
......@@ -20,6 +20,7 @@ var QfqNS = QfqNS || {};
deleteUrl: "typo3conf/ext/qfq/qfq/api/delete.php",
refreshUrl: "typo3conf/ext/qfq/qfq/api/load.php",
fileUploadTo: "typo3conf/ext/qfq/qfq/api/upload.php",
fileDeleteUrl: "typo3conf/ext/qfq/qfq/api/filedelete.php",
pageState: new n.PageState()
}, settings
);
......@@ -48,7 +49,8 @@ var QfqNS = QfqNS || {};
this.settings.submitTo,
this.settings.deleteUrl,
this.settings.refreshUrl,
this.settings.fileUploadTo);
this.settings.fileUploadTo,
this.settings.fileDeleteUrl);
this.qfqForm.setBsTabs(this.bsTabs);
this.qfqForm.on('qfqform.destroyed', this.destroyFormHandler.bind(this));
} catch (e) {
......
{
"status": "error",
"message": "error removing file"
}
\ No newline at end of file
{
"status": "ok",
"message": "success"
}
\ No newline at end of file
......@@ -17,14 +17,14 @@
<body>
<label>Submit to
<select name="submitTo" id="submitTo">
<option>404 error</option>
<option>save_error_matno.json</option>
<option>save_error_geburtstag.json</option>
<option>save_no_redirect.json</option>
<option>save_server_redirect.json</option>
<option>save_client_redirect.json</option>
</select>
<select name="submitTo" id="submitTo">
<option>404 error</option>
<option>save_error_matno.json</option>
<option>save_error_geburtstag.json</option>
<option>save_no_redirect.json</option>
<option>save_server_redirect.json</option>
<option>save_client_redirect.json</option>
</select>
</label>
<label>Delete URL
......@@ -45,6 +45,14 @@
</select>
</label>
<label>File Delete Url
<select name="fileDeleteUrl" id="fileDeleteUrl">
<option>404 error</option>
<option>delete_file_ok.json</option>
<option>delete_file_error.json</option>
</select>
</label>
<div class="container-fluid">
<div class="row hidden-xs">
......@@ -102,6 +110,7 @@
<form id="myForm" class="form-horizontal" data-toggle="validator">
<input type="hidden" name="s" value="badcaffee1234">
<div class="tab-content">
<!--pill: Person-->
......@@ -643,7 +652,17 @@
<label for="fileupload" class="control-label">File upload</label>
</div>
<div class="col-md-6">
<input id="fileupload" type="file" name="fileupload">
<div class="col-md-6">
<div class="uploaded-file "><span class="uploaded-file-name">john.doe.png</span>
<button class="delete-file" data-sip="571f23506ad2a"
name="trash-picture:1"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<input id="fileupload" name="picture:1" disabled="disabled" class="hidden" type="file">
<div class="help-block with-errors"></div>
</div>
</div>
<div class=" col-md-4">
......@@ -1001,7 +1020,8 @@
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val()
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
});
$("#submitTo").on("change", function (evt) {
......@@ -1019,6 +1039,11 @@
qfqPage.qfqForm.fileUploader.targetUrl = 'api/' + $(evt.target).val();
});
$("#fileDeleteUrl").on("change", function (evt) {
qfqPage.settings.fileDeleteUrl = 'api/' + $(evt.target).val();
qfqPage.qfqForm.fileDeleter.targetUrl = 'api/' + $(evt.target).val();
});
$('#myForm').on('invalid', function () {
console.log("Invalid event catched");
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment