Using ng-s3 upload to upload files and using the url obtained in the backend is quiet a common task for developers. It’s is as easy as a 10 minute task. S3 packages the functionalities like uploading and replacing the uploaded files with new ones. But when a requirement came for ‘removing an already existing file from S3′ came, it felt like quiet a task.
The gem I used is ‘ng-s3upload’
The requirement was that when we have an image uploaded we should have the ‘remove’ button aligned straight to the replace button.
One of the possible solutions was to replace the field to null when clicked on a button named ‘Remove file’.
The first approach I took was by creating my own button and binding it to an ng-click which calls a scope method which does the job of replacing the field with an empty string.
In my application view file, I added:
.remove-attribute
%button.btn.btn-primary(ng-click=”removeEventConfigurationAttribute(”field_name’)” ng-if=”field_name”) Remove file
In my controller(coffee script), I added:
$scope.removeEventConfigurationAttribute = (field)->
$scope.eventConfiguration[field] = “”
The reason why I was passing the field name was to make the method generic as there were multiple places where we go for image uploading(like banner, background image, poster, logo, and so on).
The difficulty I faced here was the style issue raised.
The button wasn’t aligned horizontal as the s3 image preview and the ‘Replace file’ was wrapped in a single div and it forced me to use absolute positioning of the button. Everything went perfect till I tried uploading a pdf. The alignment got disturbed and I realized that my approach was wrong.
I realized that I should actually play with the ng-s3upload directives and it worked perfect !!!
The steps I followed:
1. Removed the ‘ng-s3upload’ gem from my gemfile and created a new javascript file to and added the code from the repository :
ng-s3-upload directive
I used the same filename so that I needn’t touch other parts of the code to get the system work as it was working before. The first step went well.
As I tried to understand how they uploaded a file, the places were I got interested were:
var button = angular.element(element.children()[0]),
file = angular.element(element.find(“input”)[0]);
button.bind(‘click’, function (e) {
file[0].click();
});
What the gem is actually doing is hiding the the html file upload button(input) and on clicking the exposed button which is the first element of the div, triggering a click on the hidden input(the first input) file upload button.
Also from the:
then(function (){
ngModel.$setViewValue(s3Uri + key);
scope.filename = ngModel.$viewValue;
}
I got the point that the $setViewValue with the s3uri+key parameter which was bound to the ngModal was responsible for storing the url value.
Understanding the code, my task was to set this to null once my ‘Remove file’ button was clicked.
2. In my S3-upload theme file(app/assets/templates/themes/s3-uploads.html.haml), I added :
%button.btn.btn-primary.btn-sm{:type => “button”, “ng-show” => “filename && !uploading”}
Remove file
- In the Js I added:
var clearButton = angular.element(element.children()[1]);
clearButton.bind(‘click’, function (e) {
ngModel.$setViewValue(null);
scope.filename = null;
});
This actually clicks the second child element (once file uploaded, there will be a ‘Replace file’ button which takes the first child element position) and on clicking the button, setting the $setViewValue to null and the scope modal filename also to null.
And finally I could get my own S3 Remove file button ready which can be used for any images or pdfs or whatsoever that is uploaded via s3 throughout my application.
