Given the html form ...
<form id="mainform" action="/upload" enctype="multipart/form-data" method="post">
<div>
<input type="file" name="img"/>
</div>
<div>
<input type="submit" value="Send">
</div>
</form>
... and the handler ...
class Picture(db.Model):
image = db.BlobProperty()
class Submission(webapp.RequestHandler):
def post(self):
picture = Picture()
image = self.request.get("img")
picture.image = db.Blob(image)
picture.put()
self.redirect('/')
... is there any way within the handler to get the filename the user entered for the upload? In PHP, I can refer to $_FILES['img']['name'], but I do not see what syntax, if any, would work with request.get. In another question, another author uses a javascript routine in his html page to extract the filename the user chooses every time an OnChange event occurs, and then pass it separately in a hidden field. Is that necessary? PHP seems to get the filename for free.
I uncovered a solution in the documentation for the cgi module:
picture.local_filename = self.request.POST[u'img'].filename
The request's POST object is a collection of FieldStorage, and FieldStorage objects have a filename attribute.
Related
i ve created a database in localhost and table in it called gallery. I want to upload and store pictures there but i m stuck.. Can you please give me any guides or tutorial how to do it? Thanks.
upload file just refer to laravel document
for example photo is the name fo file in form
<form action="xxx" method="post" enctype="multipart/form-data">
<input type="file" name="photo" />
<input type="submit" value="update" />
</form>
store the file then return file's path in filesystem
$path = $request->photo->storeAs('images', 'filename.jpg');
$path = $request->photo->storeAs('images', 'filename.jpg', 's3');
then store the $path to your database
First you need the form on your view (don't forget the csrf token):
<form action="/image-upload" method="POST" enctype="multipart/form-data">
#csrf
<input type="file" name="image">
<button type="submit">Upload</button>
</form>
And on your routes file add the route for POST method:
Route::post('image-upload', 'ImageUploadController#imageUploadPost');
Then on your Controller create the function that will validate and
move your image to the 'public/images' folder.
public function imageUploadPost()
{
request()->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$imageName = time().'.'.request()->image->getClientOriginalExtension();
request()->image->move(public_path('images'), $imageName);
}
I have followed countless examples (from here and other sites) that explain how you upload files from Angular to a web server. I am happy with the solution of using angular-file-upload and processing the data on the server (Node) with Multer.
What I haven't been able to find is a way to upload files from the form with a post that contains all the other controller data.
controller:
$scope.files = [];
$scope.name = "";
$scope.post = //$http post to server from service
view:
<input type="text" ng-model="name">
<input type="file">
<button ng-click="post()">Send post without page refresh</button>
Is there a way I can send the [name] and the [files] in the same post? If I send with multi part data will that be ok for [name] and [files]? Do I need to send two separate posts?
At the moment, my working example submits with a form action of 'post' and an enctype of "multipart/form-data". But I don't want the page to refresh and I want to send [name] and [files] from the scope... do I need to attach the files from the form to the scope or get the scope to pull the files from the DOM?
You can push formData to file before upload.
$scope.uploader.onBeforeUploadItem = function(fileItem) {
fileItem.formData.push({name: $scope.name});
};
Please look through the demo for complete solution :)
Plunkr
<form>
<input type="text" placeholder="Enter Name here" ng-model="newCountry.Name" />
<label>Choose 1 or more files:</label>
<input type="file" ng-files="AddnewCountryFlag($files)" multiple />
<h3>Try Uploading Image file. It will preview your image.</h3>
<div ng-repeat="item in imagesrc">
<img src="{{item.Src}}" />
<label>{{item.Size}}kB</label>
</div>
<input type="submit" value="Send Data" ng-click="AddCountry()" />
I'm building an app in which I need to upload an image with angularjs, pass it with other data to a save() method written in laravel, what is the simplest way to do it?
in my html I have a title field and an image uploader:
<form>
<input type="text" required ng-model="selectedAD.title">
<input type="file" name="file" ngf-max-size="2MB" required ng-model="selectedAD.image"/>
<a class="btn-portal" type="submit" ng-click="saveAD()">
</form>
and inside my js file, I pass these data into the save route which goes to the store() function in laravel and moves the image into a folder, like this:
$scope.selectedAD = ad;
$scope.saveAD = function(){
$scope.managementErrors = [];
adsResource.save($scope.selectedAD,function(success){
$('#ads-modal').modal('hide');
showSuccessAlert($scope,$timeout, getSuccessMessages(success),$('#successMessages'));
$scope.getAdsTimeout();
},function(error){
$scope.managementErrors = getErrorMessagesUpdate(error);
});
this way the image is not passed to laravel processing code, it instead passes null to the store function, any helpful guides ?
I have the following form in my AngularJS app which contain hidden fields with values filled based on user selection on some inputs on the form (radio buttons...etc), when the user click on the Submit link I should route the user to an external URL while passing hidden fields just as any normal form submission. Unfortunately I can't do this as some of the hidden field values are dependent on some calculations inside a function of the view related controller (as shown below in controller code, so I was wondering is there a way I can call the controller function from this form, then the controller function post the whole form and its field? Any example is highly appreciated. Thanks.
Note I am using link instead of a button.
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name" ng-model="client.name">
...
...
<input type="hidden" name="amount" ng-value="order.total">
...
...
<a class="orderButton" href="javascript:{}" onclick="document.getElementById('clientPaymentForm').submit(); return false;">Order Now</a>
</fieldset>
</div>
</form>
Controller:
$scope.processOrder = function(){
//Order calculation happens here to update order.total value and can only happen after click click Order Now to place the order...
};
I guess this is a bit late, but what you want to use is the ng-click directive which will allow you to call functions defined directly on the scope.
Assuming that you've defined $scope.processOrder, change your a tag to the following:
<a class="orderButton" ng-click="processOrder()">Order Now</a>
And everything should work as hoped.
Alternatively, you could use ng-submit on the form to have it work when you press the "Enter" or "Return" key, as in:
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-click="processOrder()">.
I am making a POST request to a RESTFUL api and the only way I can pass the parameters is if I add them into the URL used in the forms 'action' parameter. As soon as I take those parameters and put them down into the form's body component the request no longer works. My question is how do I use the inputs within the form to define the request parameters instead of the embedding the parameters into the action URL?
I do notice that when I submit the request the request body parameters show up, but the actual request fails saying that the parameters are not there.
Here is the HTML:
<form target="hiddenIframe" method="POST" action="/rest/bpm/wle/v1/process/5853?action=addDocument&name=test123&docType=file&parts=none&accept=application/json&override-content-type=text/plain" enctype="multipart/form-data">
<input type="text" name="instanceId" value="5823" />
<input type="text" name="name" value="myTestQ1" />
<input type="text" name="docType" value="file" />
<input id="myFileName" type="file" name="data" />
<input type="submit"/>
</form>
<iframe name="hiddenIframe" id="hiddenIframe" style="display: none;" />
As you can see the action in the form tag is very long and is not dynamic... I would like to only have "/rest/bpm/wle/v1/process/" there, but when I do the upload fails.
I'd use some Javascript. Add an onchange to all the mandatory input fields. And the change method you'll be calling can update your action url with the new data from the form field.
Something like:
<input type="text" name="instanceId" value="5823" onchange="updateInstanceID()" id="instanceid" />
action="/rest/bpm/wle/v1/process/5853?action=addDocument&name=test123&docType=file&parts=none&accept=application/json&override-content-type=text/plain"
Now, your Javascript should have that method.
function updateInstanceID() {
var val = document.getElementById("instanceid").value;
var form = document.forms[0]; // assuming only one form on the page.
....
}
Now you can access your form.action field and update it accordingly.