Upload bitmap data from flash to laravel route - php

I have a video player built in AS3. I take a snapshot of the video player using this code:
var uploadUrl = 'http://localhost:8000/assets/uploadframegrab';
var bitmap = new Bitmap();
var graphicsData : Vector.<IGraphicsData>;
graphicsData = container.graphics.readGraphicsData();
bitmap.bitmapData = GraphicsBitmapFill(graphicsData[0]).bitmapData;
var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(bitmap.bitmapData);
var loader:URLLoader = new URLLoader();
var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var csrf:URLRequestHeader = new URLRequestHeader("X-CSRF-Token", csrfToken);
var request:URLRequest = new URLRequest(uploadUrl);
request.requestHeaders.push(header);
request.requestHeaders.push(csrf);
request.method = URLRequestMethod.POST;
request.data = jpgStream;
loader.load(request);
I need to upload the encoded to JPG using one of my Laravel routes. My route looks like:
Route::post('assets/uploadframegrab', 'AssetController#uploadFramegrab');
When I run the AS3 code, it calls the laravel route, but my $request variable appears to be empty. The Request Payload property on the network info tab that shows all my headers and stuff contains what looks like the source of the image file.
If I do a return Response::json(['filedata' => $request]); all I get is this:
filedata: {
attributes: {},
request: {},
query: {},
server: {},
files: {},
cookies: {},
headers: {}
}
My uploadFramegrab function is simply this for now:
public function uploadFramegrab(Request $request)
{
if ($request)
{
return Response::json(['filedata' => $request]);
}
else
{
return Response::json(['error' => 'no file uploaded']);
}
}
I've searched online but I cannot find anything specifically for uploading from flash to laravel. I've done it javascript to laravel no problem. Anyone know what this could be? If you'd like more information please ask.

To do that, you can use the Multipart.as ( AS3 multipart form data request generator ) from Jonas Monnier. It's really very easy to use it, take a look on this example ( using the basic example from the github project's page ) :
var upload_url:String = 'http://www.example.com/upload';
// create an orange square
var bmp_data:BitmapData = new BitmapData(400, 400, false, 0xff9900);
// compress our BitmapData as a jpg image
var image:ByteArray = new JPGEncoder(75).encode(bmp_data);
// create our Multipart form
var form:Multipart = new Multipart(upload_url);
// add some fields if you need to send some informations
form.addField('name', 'bmp.jpg');
form.addField('size', image.length.toString());
// add our image
form.addFile('image', image, 'image/jpeg', 'bmp.jpg');
var loader:URLLoader = new URLLoader();
loader.load(form.request);
Then, in the PHP side, you do as you have usually did :
public function upload(\Illuminate\Http\Request $request)
{
if($request->hasFile('image'))
{
$file = $request->file('image');
$upload_success = $file->move($your_upload_dir, $file->getClientOriginalName());
if($upload_success)
{
return('The file "'.$request->get('name').'" was successfully uploaded');
}
else
{
return('An error has occurred !');
}
}
return('There is no "image" file !');
}
Hope that can help.

Based on the doc for AS3 (emphasis mine):
The way in which the data is used depends on the type of object used:
If the object is a ByteArray object, the binary data of the ByteArray object is used as POST data. For GET, data of ByteArray type is not supported. Also, data of ByteArray type is not supported for FileReference.upload() and FileReference.download().
If the object is a URLVariables object and the method is POST, the variables are encoded using x-www-form-urlencoded format and the resulting string is used as POST data. An exception is a call to FileReference.upload(), in which the variables are sent as separate fields in a multipart/form-data post.
You're clearly in the first case here.
From the Laravel Requests doc:
To obtain an instance of the current HTTP request via dependency injection, you should type-hint the Illuminate\Http\Request class on your controller constructor or method. The current request instance will automatically be injected by the service container.
The Request class API:
string|resource getContent(bool $asResource = false)
Returns the request body content.
Putting it together:
public function uploadFramegrab(Request $request) {
$content = $request->getContent();
$fileSize = strlen($content);
}
In Laravel 4:
$csrf = Request::header('X-CSRF-Token');
// Add a header like this if you want to control filename from AS3
$fileName = Request::header('X-File-Name');
$content = Request::getContent(); // This the raw JPG byte array
$fileSize = strlen($content);
Last time I checked Laravel uses php://input to read the request body. See this answer for more info.

Related

Laravel, FineUploader and FileReader API: compare hash of file before uploading

I'd like to compare the hashed version of the file against the data stored in the database, so I can abort duplicate uploads.
Being quite "new" to the subjects of hashing and the FileReader API, I'm finding the process a bit confusing.
I am using the frontend library SparkMD5.js
Test n1 compare two strings:
// frontend
$.post(url, {sparkMD5('random text')})
// backend
$input->hash == md5('random text') // outputs true
Test n2 - inside fineuploader onSubmit event handler
// frontend
var file = this.getFile(id);
var reader = new FileReader();
//
reader.onload = function(e) {
var data = reader.result;
var hexHash = SparkMD5.hash(data);
console.log(hexHash);
}
var res = reader.readAsDataURL(file); // or reader.readAsBinaryString(file)
......
//backend
$file = Input::file('qqfile');
$hash = md5(file ) // or md5_file(file )
$hash == $input->hexHash // outputs false
My questions:
1) Why is the result of md5($file) == md5_file($file) \\ false ?
2) What's the correct way of reading a file readAsDataURL or readAsBinaryString ?
3) Is there a way to read and hash the result of fineuploader's getFile(id) which returns File or Blob, without using filereader api?
Answers to the above questions may be considered broad and out of scope of my immediate problem, but i'd like to understand the subject as best as possible.
Thanks.
Input::file() returns an instance of Illuminate\Http\UplaodedFile, so to get the hash of its contents you can do the following:
// md5_file takes in the file path as argument
$hash = md5_file(Input::file('yourfile')->path());
readAsDataURL() is much safer because the file is encoded as base64. Just make sure that the server is aware of the encoding, meaning remove the first characters up to the comma then decode the rest as base64. More information here: fileReader.readAsBinaryString to upload files
According to this you still have to use filereader: How to include Content-MD5 header in FineUploader Azure request?.
Thanks to #alio f I was able to come up with a solution. Here's the code.
frontend
var t = this;
var reader = new FileReader();
var file = this.getFile(id);
reader.addEventListener("load", function () {
var base64result = reader.result.split(',')[1]; // only get base64 string
var hash = SparkMD5.hash(base64result);
}, false);
var data = reader.readAsDataURL(file);
Refer to FineUploader docs for the onSubmit handler.
backend
$this->file = Input::file('qqfile');
$base64 = base64_encode(file_get_contents($this->file));
$hash = md5($base64);
Comparing frontend's md5 and backend's md5 now returns true

Php actionscript bitMapData post image

I would like to be able to display an image on the file script.php with the help of data transmitted by this code (Actionscript)
I get data by the POST method but I do not know what to do with it.
header('Content-Type: image/jpeg');
I don't know what to do with $_POST
public function onTakePhoto(param1:Event) : void
{
var _loc1_:Bitmap = new Bitmap(new BitmapData(680,440));
var _loc2_:Matrix = new Matrix();
_loc2_.translate(-290,-150);
_loc2_.scale(2,2);
_loc1_.bitmapData.draw(DisplayObject(something),_loc2_);
var _loc3_:ByteArray = new ByteArray();
_loc1_.bitmapData.encode(_loc1_.bitmapData.rect,new JPEGEncoderOptions(),_loc3_);
var _loc4_:URLRequest = new URLRequest("script.php");
_loc4_.method = URLRequestMethod.POST;
_loc4_.data = _loc3_;
navigateToURL(_loc4_,"_blank");
_loc1_.bitmapData.dispose();
}
You can fetch the $_POST data like this:
$image_data = file_get_contents("php://input");
//proceed by perhaps saving the image to the server:
file_put_contents('path/to/save/image.jpg',$image_data);

Save API response to server as JSON file with AngularJS

I'm trying to create an app in AngularJS that aggregates data from multiple APIs. With some public APIs there are request limits and much of the data I want to pull is not updated very frequently, so only one request a month for a particular ID is necessary. To get past this, I've set up a Factory that first checks for a local file on the server, if it is not present, it then goes to the API and performs a GET request.
From there, once the request is complete, I want to save that file to the server with a name set by a field in the response.
I've found some examples using PHP with AngularJS but I'm not sure on how to save the JSON file with the dynamic name...or if this is even the best thing to do in order to avoid the request limits.
var apiUrl = 'https://example.com/api?userID=';
$http.get(apiUrl + $stateParams.userID).
success(function(data) {
$scope.content = data;
$scope.userID = data.userID
function(){
$http.post('saveJson.php', $scope.content).then(function() {
// log success
});
};
}).
error(function() {
// log error
});
PHP
<?php
$json = file_get_contents("php://input");
$file = fopen('/var/www/USERID.json','w+');
fwrite($file, $json);
fclose($file);
?>
If you do this in a service, and just call a method from a view button click, it would be more like this:
angular.module('app.services', [
])
.service('MyService', function ($http) {
var MyService = this;
this.aggregatedData = { content: [], filename: null };
this.apiUrl = 'https://example.com/api?userID=';
this.saveUrl = 'saveJson.php';
this.getData = function (url) {
return $http.get(url + $stateParams.userID).then(function (response) {
MyService.aggregatedData.content.push(response.data);
});
};
this.saveData = function (url, fileName) {
this.aggregatedData.filename = fileName;
return $http.post('saveJson.php', this.aggregatedData).then(function () {
// do something with the post response if desired
});
};
})
Then wire up buttons in your view to fetch and save by having the controller call the service methods.

Accessing FormData file on the PHP server (symfony)

My problem is that I don't know how to get the file and file name on the server side after making ajax request with FormData. Let me add that it works for strings on the other hand. I also see the file and details in the request via FireBug.
Here is my code:
JavaScript:
var form = document.getElementById('file-form');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');
// Get the selected files from the input.
var files = fileSelect.files;
// Create a new FormData object.
var formData = new FormData();
var myArray = [];
// Loop through each of the selected files.
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log(file.name);
myArray[i] = file.name;
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
// Add the file to the request.
formData.append('photos[]', file, file.name);
}
var xhr = new XMLHttpRequest();
// Open the connection.
xhr.open('POST',
'http://localhost/amsprojektgit/amsprojekt/admin/web/fileupload', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
alert('Files uploaded');
} else {
alert('An error occurred!');
}
};
xhr.send(formData);
Server side PHP (Symfony2 container)
public function fileUpload(Request $request)
{
$upload = $_POST;
$logger = $this->get('logger');
$logger->info($upload);
$logger->error('');
die();
}
The response via FireBug looks like this:
-----------------------------269272101016568
Content-Disposition: form-data; name="photos"; filename="elektpolaniec2.jpg"
Content-Type: image/jpeg
ÿØÿà�JFIF��H�H��ÿá#Exif��II*����������������¬������r������z��(�������
��������������2�������
������ ��� ��1�(���©��i�������$�� ������0220� ����0100 ������������
������ ������� ����X����������������������� ��"�������'���
�P���
��������������������������� �������
����!��¢��������£�������£�������¤��������¤��������¤��������¤����)��¤�
������¤��������¤��������¤�������� ¤��������
¤������������������������1������9��(�����������A������÷������H�����
�H������2014:02:28 11:05:03�Panasonic�DMC-FX01�PaintShop Pro 15,00���������������������������2013
:06:20 15:42:46�2013:06:20 15:42:46�
It doesn't log anything. Do you have an idea how can I access filenames of the files sent and the content of files themselves?
Thank you for the anser.
Uhm.. In plain PHP the files are stored in a temporary directory and the file information is served through the $_FILES array.
In Symfony we don't wish to use the superglobal array's directly but we could for example use the Request object. For file uploads you should read this.
Your Question
In your JS you have
formData.append('photos[]', file, file.name);
So that means symfony will get that in an array as photos.
$uploads = $request->files->get('photos');
$uploads is an Array of File objects. You will need to loop though $uploads and process each file.
Side note
If you are not uploading multiple in one request and want just an upload, not as an array then change your JS to:
formData.append('photo', file, file.name);
Then in Symfony you would use
$upload = $request->files->get('photo');
And $upload is a File reference

Javascript calling Flash function to upload file

I was wondering if i could get som suggestions on what the best approach to do the following would be...
I am currently calling a Flash AS3 function from Javascript (using jQuery) this function uploads a file which has already been selected in this flash file. Flash then uploads the file and calls a php file (upload.php) which handles the processed file. This all works fine. However there are other details that are filled out that pertain to the file uploaded (entered by the user in textboxes) All this data including the file path to where it has been uploaded must then be saved to a DB. Which can be done through an ajax call to another php file (processData.php). My issue is that when i upload the file i cant send the other details along with the file through flash (atleast not that i know of) which causes 2 different php scripts to execute. Secondly the other php script called through ajax doesnt have the file information to add to the DB. I can store this info in a session if i want but it just doesnt seem to convince me as the best way to go about this. Any other ideas or suggestions?
There is quite a bit of code I have so to avoid making this a HUGE question ill post the JS part that i think is important and some snippets of flash so you can have an idea of whats going on... If theres anyhting else youd like to see of the code feel free to ask and ill post it...
JS:
$("#uploadAudio").submit(function(event) {
event.preventDefault();
var form = $(this);
var title = form.find("#title").val();
var desc = form.find("#desc").val();
var flash = $("#flash");
var flashFileSet = flash.get(0).jsIsFileSelected();
if(flashFileSet)
{
$.ajax({
type: "POST",
url: "processData.php",
dataType: "text",
data: "title=" + title + "&desc=" + desc,
async: false,
success: function() {
audFile.get(0).jsUploadFile();
}
});
}
});
Flash
public function fUploader(){
req = new URLRequest();
req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://virtualmanagementonline.com/ajax/audUpload.php';
pFilterType = ( stage.loaderInfo.parameters.filterType )? stage.loaderInfo.parameters.filterType : 'Images';
pFileFilters = ( stage.loaderInfo.parameters.fileFilters )? stage.loaderInfo.parameters.fileFilters : '*.jpg;*.jpeg;*.gif;*.png';
file = new FileReference();
setup( file );
select_btn.addEventListener( MouseEvent.CLICK, browse );
progress_mc.bar.scaleX = 0;
tm = new Timer( 1000 );
tm.addEventListener( TimerEvent.TIMER, updateSpeed );
cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );
cancel_btn.visible = false;
ExternalInterface.addCallback("jsUploadFile", uploadFile);
ExternalInterface.addCallback("jsIsFileSelected", IsFileSelected);
}
public function browse( e:MouseEvent ){
filefilters = [ new FileFilter(pFilterType, pFileFilters) ]; file.browse( filefilters );
}
private function selectHandler( e:Event ){
var tf = new TextFormat();
tf.color = 0x000000;
label_txt.defaultTextFormat = tf;
label_txt.text = file.name;
//file.upload( req );
}
public function IsFileSelected():Boolean{
if(label_txt.text != "")
{
return true;
}
else
{
return false;
}
}
public function uploadFile():void{
file.upload(req);
}
**Note: NOT all the flash code is shown since there is alot. I put up what i thought was needed to get an understanding of what exactly is going on.
If there is anything i can add for further details please let me know. Thanks in advance!
You can send as many data as you want to flash, since ExternalInterface is available.
ActionScript 3 Reference states the following about ExternalInterface:
From JavaScript on the HTML page, you can:
- Call an ActionScript function.
- Pass arguments using standard function call notation.
- Return a value to the JavaScript function.
All you have to do is register an ActionScript function/method as callable from the container:
ActionScript
...
ExternalInterface.addCallback("jsUploadFile", uploadFile);
...
public function uploadFile (title:String, desc:String):void
{
var infos:URLVariables = new URLVariables();
infos.desc = desc;
infos.title = title;
/* When you pass the URLVariables to data property of URLRequest,
all variables associated with the URLVariables object will be
sent to the server along with the image uploaded. */
req.data = infos;
file.upload(req);
}
Then, call it from the container (HTML) passing the additional information as parameters.
JavaScript
$("#uploadAudio").submit(function(event) {
event.preventDefault();
var form = $(this);
var title = form.find("#title").val();
var desc = form.find("#desc").val();
var flash = $("#flash");
var flashFileSet = flash.get(0).jsIsFileSelected();
if(flashFileSet)
{
/* Instead of sending title and desc to the server via ajax, pass
them as parameters to the jsUploadFile method. So
you can handle everything in one place */
audFile.get(0).jsUploadFile(title, desc);
}
});
Hope it helps.

Categories