Zubrag Form showing csrf token on screen after post then nothing? - laravel

I have tried everything to get this form to send. Using laravel 6.
Here is Zubrag form to submit
<?php
###############################################################
# Page Password Protect 2.13
###############################################################
# Visit zubrag.com/scripts/ for updates
###############################################################
#
# Usage:
# Set usernames / passwords below between SETTINGS START and SETTINGS END.
# Open it in browser with "help" parameter to get the code
# to add to all files being protected.
# Example: password_protect.php?help
# Include protection string which it gave you into every file that needs to be protected
#
# Add following HTML code to your page where you want to have logout link
# Logout
#
###############################################################
/*
-------------------------------------------------------------------
SAMPLE if you only want to request login and password on login form.
Each row represents different user.
$LOGIN_INFORMATION = array(
'zubrag' => 'root',
'test' => 'testpass',
'admin' => 'passwd'
);
--------------------------------------------------------------------
SAMPLE if you only want to request only password on login form.
Note: only passwords are listed
$LOGIN_INFORMATION = array(
'root',
'testpass',
'passwd'
);
--------------------------------------------------------------------
*/
##################################################################
# SETTINGS START
##################################################################
// Add login/password pairs below, like described above
// NOTE: all rows except last must have comma "," at the end of line
$LOGIN_INFORMATION = array(
'xxxxxx' => 'xxxxxx',
'xxxxxx' => 'xxxxxx'
);
// request login? true - show login and password boxes, false - password box only
define('USE_USERNAME', true);
// User will be redirected to this page after logout
define('LOGOUT_URL', 'https://example.com/');
// time out after NN minutes of inactivity. Set to 0 to not timeout
define('TIMEOUT_MINUTES', 1);
// This parameter is only useful when TIMEOUT_MINUTES is not zero
// true - timeout time from last activity, false - timeout time from login
define('TIMEOUT_CHECK_ACTIVITY', true);
##################################################################
# SETTINGS END
##################################################################
///////////////////////////////////////////////////////
// do not change code below
///////////////////////////////////////////////////////
// show usage example
if(isset($_GET['help'])) {
die('Include following code into every page you would like to protect, at the very beginning (first line):<br><?php include("' . str_replace('\\','\\\\',__FILE__) . '"); ?>');
}
// timeout in seconds
$timeout = (TIMEOUT_MINUTES == 0 ? 0 : time() + TIMEOUT_MINUTES * 60);
// logout?
if(isset($_GET['logout'])) {
setcookie("verify", '', $timeout, '/'); // clear password;
header('Location: ' . LOGOUT_URL);
exit();
}
if(!function_exists('showLoginPasswordProtect')) {
// show login form
function showLoginPasswordProtect($error_msg) {
?>
<html>
<head>
<font color="#0156b2">
<title>Please enter password to access this site</title>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
</head>
<body>
<style>
input { border: 1px solid green; border-radius: 5px; color:#026494; }
</style>
<div style="width:500px; margin-left:auto; margin-right:auto; text-align:center">
<form action="https://example.com/login.blade1" method="post">
<input type="hidden" name="_token" value="WXMuxSwIGE9hg0NaE7ckYHSqrJo1LHquyI4bzuB3">
<h3>You can login with the following
User:xxxxxx / password:xxxxxx</h3>
<font color="red"><?php echo $error_msg; ?></font><br />
<?php if (USE_USERNAME) echo 'User:<br /><input type="input" name="access_login" /><br />Password:<br />';?>
<input type="password" name="access_password" /><p></p><input type="submit" name="Submit" value="Submit" />
</form>
<br />
</div>
</body>
</html>
<?php
// stop at this point
die();
}
}
// user provided password
if (isset($_GET['access_password'])) {
$login = isset($_GET['access_login']) ? $_GET['access_login'] : '';
$pass = $_GET['access_password'];
if (!USE_USERNAME && !in_array($pass, $LOGIN_INFORMATION)
|| (USE_USERNAME && ( !array_key_exists($login, $LOGIN_INFORMATION) || $LOGIN_INFORMATION[$login] != $pass ) )
) {
showLoginPasswordProtect("Use the above");
}
else {
// set cookie if password was validated
setcookie("verify", md5($login.'%'.$pass), $timeout, '/');
// Some programs (like Form1 Bilder) check $_POST array to see if parameters passed
// So need to clear password protector variables
unset($_GET['access_login']);
unset($_GET['access_password']);
unset($_GET['Submit']);
}
}
else {
// check if password cookie is set
if (!isset($_COOKIE['verify'])) {
showLoginPasswordProtect("");
}
// check if cookie is good
$found = false;
foreach($LOGIN_INFORMATION as $key=>$val) {
$lp = (USE_USERNAME ? $key : '') .'%'.$val;
if ($_COOKIE['verify'] == md5($lp)) {
$found = true;
// prolong timeout
if (TIMEOUT_CHECK_ACTIVITY) {
setcookie("verify", md5($lp), $timeout, '/');
}
break;
}
}
if (!$found) {
showLoginPasswordProtect("");
}
}
?>
Message displayed after post:
Array ( [_token] => WXMuxSwIGE9hg0NaE7ckYHSqrJo1LHquyI4bzuB3 [access_login] => [access_password] => [Submit] => Submit )
If i remove the token then i get a 419 expired message.
If i add my url to VerifyCsrfToken.php it makes no difference.
Here is the controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UsersController extends Controller
{
public function formSubmit(Request $req)
{
print_r($req->input());
}
}
Here is the route:
Route::view('/login.blade1', "login.blade1");
Route::post('/login.blade1', 'UsersController#formSubmit');
Any help would be great as i am pulling my hair out over this.

Related

How to send by form an image in http request, and with what headers?

I searched on google and nothing...
i have a form in my view on vueJS :
<form #submit.prevent="avatar()" method="POST" enctype="multipart/form-data">
<input type="file" name="profilePicture" id="profilepicture" >
<button type="submit">Valider mon avatar?</button>
</form>
The user send an image.
My question is,
i want to send the image (sending by user with the form) in a function, and this function send the image to Http Request in headers ...
the api request begin with :
app.post('/myupload/:iduser', async (req, res) => {
try{
var { iduser } = req.params ;
const { image } = req.file ;
[...]
my function in my view on vuejs is actually :
async function avatar() {
console.log(document.getElementById("profilepicture").value);
// for having the image sending src
let response = await fetch(`http://localhost:196/myupload/${MyTokenStore.myid}`, {
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
},
body: JSON.stringify(document.getElementById("profilepicture").value)
})
.then((response) => response.json())
.catch((error) => {
console.log("Failed", error)
});
if(response.error){
alert(response.message);
return
}
}
But the only parameter i make in request is the string of the src image, and the error servor is :
TypeError: Cannot destructure property 'image' of 'req.files' as it is undefined.
Please, i need help, the request run when I go directly to the url of the request (but the browser directly displays the server response):
<form :action="`http://localhost:196/myupload/${MyTokenStore.myid}`"
method="POST" enctype="multipart/form-data">
<input type="file" name="image"/>
<button type="submit">Valider mon avatar</button>
</form>
but I fail to put it in a function...
thank you.

To send an image from Vue doing a request you have to use a FormData object. For example:
/**
* #description - register user
*/
const register = async () => {
try {
const fd = new FormData();
Object.keys(user.value).forEach((key) => {
fd.append(key, user.value[key]);
});
const res = await axios.post('/register', fd, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
toast.success(res.data);
} catch (err) {
console.log(err);
toast.error(err.response.data);
}
};
In the previous code, in register I'm using a FormData to send the user object to the backend. Previously, you should set it. I made it like the following example:
const setProfileImage = (e) => {
image_preview.value = URL.createObjectURL(e.target.files[0]);
document.getElementById('image_preview').style.height = '150px';
document.getElementById('image_preview').style.width = '150px';
user.value.profile_image = e.target.files[0]; // this is important for you.
user.value.image = e.target.files[0].name;
};
setProfileImage is receiving an event from an Input file. If you see the comment I write in the code, user.value.profile_image = e.target.files[0] is the entire file. The rest is to display the image and send the name to store into the database.
<div class="mb-3">
<label
for="profile_image"
class="bg-primary text-white rounded-3 text-center w-100 p-2 profile_image"
>
Seleccione su foto de perfil <i class="ps-1 bi bi-card-image"></i>
</label>
<input
type="file"
class="form-control d-none"
id="profile_image"
placeholder="Adjunte su foto de perfil"
#change="setProfileImage"
/>
</div>
This is the Input file what I was talking. The event is an #change to catch correctly the file.
Hope it works for you.

I am not sure if my Vue code is efficient

I am a beginner in Vue and I am wondering if I can get an insight from experienced developers here about my Vue codes. I just want to ask for help to know if my Vue approach is efficient and proper. (Project is running on Laravel)
The Case:
Let us say I have 2 tables in DB
(1) stores
(2) ad_accounts
Then we have 2 web pages to present these tables' data and execute CRUD functions with it
(1) store.blade.php
(2) adaccount.blade.php
Each page is running a Vue component
(1) Stores.vue
(2) AdAccounts.vue
I am using Vuex for store management.
Within store.js, I would have set of actions for CRUD for each vue component.
Now I realized that I have series of actions that actually does the same thing. For example, I have an action to add stores, and another action to add Ad accounts. Their only difference is that they are calling a different Laravel route.
So it seemed to me that my code was unnecessarily long and a bit expensive. To resolve, I decided to write my actions in a form of template. So this is what I did:
In store.js, I created an action for each CRUD function to be used as template
In Stores.vue and AdAccounts.vue, if I need to execute a CRUD function, I would use a method to call the corresponding action from store.js and provide the Laravel route as part of the action's payload
I have states and corresponding getters for returning these states in Stores.vue and AdAccounts.vue
Each action has a dedicated mutation that alters the approriate state
states and getters are mapped in each Vue component in order to access and use them
Is this approach efficient and proper? I have sample methods and actions below for reference.
Stores.vue
<template>
<div>
<form #submit.prevent="addData('stores/add')">
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</template>
<script>
export default {
methods: {
addData: function(url) {
this.payload.url = url
if(
this.payload.requestData.store_name == "" &&
this.payload.requestData.store_token == ""
) {
this.payload.isErr = true;
this.payload.errMsg = "ERROR: Could not continue due to some invalid or missing data. \nPlease check your entries and try again or contact your administrator.";
this.$store.dispatch('addData', this.payload)
}
else {
this.payload.isErr = false;
this.$store.dispatch('addData', this.payload)
this.readDataAll('stores/all', 'store');
}
this.cleanOnModalDismiss(this.$refs.addModal, this.refreshRequestData)
}
}
}
</script>
AdAccounts.vue
<template>
<div>
<form #submit.prevent="addData('ad_accounts/add')">
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</template>
<script>
export default {
methods: {
addData: function(url) {
this.payload.url = url
if(
this.payload.requestData.ad_id == "" &&
this.payload.requestData.ad_name == ""
) {
this.payload.isErr = true;
this.payload.errMsg = "ERROR: Could not continue due to some invalid or missing data. \nPlease check your entries and try again or contact your administrator.";
this.$store.dispatch('addData', this.payload)
}
else {
this.payload.isErr = false;
this.$store.dispatch('addData', this.payload)
this.readDataAll('ad_accounts/all', 'adaccounts');
}
this.cleanOnModalDismiss(this.$refs.addModal, this.refreshRequestData)
}
}
}
</script>
store.js
export default new Vuex.Store({
actions: {
addData (commit, payload) { // insert a record to DB
try {
if(payload.isErr == true) {
commit('SHOW_ERRORS', {messageType: "alert-danger", errorMessage: payload.errMsg});
} else {
axios.post(payload.url, payload.requestData)
.then(response=>{
if(response.status == 200) {
var err_msg = "";
if(response.data.success !== null) {
response.data.messageType = "alert-info"
response.data.actionMessage = response.data.success
commit('ADD_DATA', response.data);
} else {
response.data.messageType = "alert-danger"
for(var i=0; i<response.data.error.length; i++) {
err_msg += response.data.error[i] + "\n"
}
response.data.actionMessage = err_msg
commit('ADD_DATA', response.data);
}
}
else {
commit('SHOW_ERRORS', {messageType: "alert-danger", errorMessage: "ERROR: Connection status set to '" + response.headers.connection + "' due to error " + response.status + " " + response.statusText + ". \nPlease contact your administrator."});
}
})
}
} catch (error) {
commit('SHOW_ERRORS', {messageType: "alert-danger", errorMessage: error})
}
}
}
}

Fine Uploader S3 / jQuery / PHP - Failed upload = Reason: XHR returned response code 0

I have been kicking around trying to implement the S3 uploader into my application and getting closer but no cigar. Here is my setup in a nutshell:
Running: 5.2.0 S3 with jQuery
Server: PHP 5.6.6 on ArchLinux
Max file size 25MB (defined in both s3.php and s3demo-cors.php)
Debug enabled: which just pops the Javascript alert with the XHR error code 0 message (can't seem to gain visibility into whats going on behind the scenes with debug or in the apache logs)
I specifically want to only use HTTPS for my bucket endpoint for security sake.
Testing with Google Chrome Version 42.0.2311.90 m and IE 11.0.9600
With Chrome it just fails, with IE it fails BUT it at least shows the progress meter for uploading the file, it hits 65% then fails.
I have followed the blog post here: http://blog.fineuploader.com/2013/08/16/fine-uploader-s3-upload-directly-to-amazon-s3-from-your-browser/ multiple times (hoping I am not missing something).
QUESTION: One thing I am curious about is the JSON policy and signing. I am not really seeing the code in the s3demo-cors.php example that creates the json formatted details perhaps I am missing that element?
I know my IAM permissions are valid because other PHP tests allow various PutObject and list commands successfully.
I have verified my CORS config is setup as follows for testing:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
I have a few files I am using for this:
s3.php = my test page with the fineuploader instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery
====================================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Fine Uploader Gallery CSS file
====================================================================== -->
<link href="fine-uploader-gallery.css" rel="stylesheet">
<!-- Fine Uploader S3 jQuery JS file
====================================================================== -->
<script src="s3.jquery.fine-uploader.js"></script>
<!-- Fine Uploader Customized Gallery template
====================================================================== -->
<script type="text/template" id="qq-template-s3">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<a class="preview-link" target="_blank">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</a>
</div>
<button class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button class="qq-cancel-button-selector">No</button>
<button class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button class="qq-cancel-button-selector">Cancel</button>
<button class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<style>
#fine-uploader-s3 .preview-link {
display: block;
height: 100%;
width: 100%;
}
</style>
<title>Fine Uploader S3 Demo</title>
</head>
<body>
<!-- Fine Uploader DOM Element
====================================================================== -->
<div id="fine-uploader-s3"></div>
<!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
====================================================================== -->
<script>
$('#fine-uploader-s3').fineUploaderS3({
debug: true,
template: 'qq-template-s3',
request: {
endpoint: "https://s3.amazonaws.com/<HIDDEN>",
accessKey: "<HIDDEN>"
},
signature: {
endpoint: "s3demo-cors.php"
},
uploadSuccess: {
endpoint: "s3demo-cors.php?success",
params: {
isBrowserPreviewCapable: qq.supportedFeatures.imagePreviews
}
},
iframeSupport: {
localBlankPagePath: "success.php"
},
cors: {
expected: true
},
chunking: {
enabled: true
},
resume: {
enabled: true
},
retry: {
enableAuto: true // defaults to false
},
deleteFile: {
enabled: true,
method: "POST",
endpoint: "s3demo-cors.php"
},
validation: {
itemLimit: 100,
sizeLimit: 25000000
},
thumbnails: {
placeholders: {
notAvailablePath: "not_available-generic.png",
waitingPath: "waiting-generic.png"
}
},
callbacks: {
onComplete: function(id, name, response) {
var previewLink = qq(this.getItemByFileId(id)).getByClass('preview-link')[0];
if (response.success) {
previewLink.setAttribute("href", response.tempLink)
}
},
onError: function(id, name, errorReason, xhrOrXdr) {
alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
}
}
});
</script>
</body>
</html>
My PHP server side code is from your examples s3demo-cors.php
(sorry code formatting got a little garbled when pasting in here)
<?php
/**
* PHP Server-Side Example for Fine Uploader S3.
* Maintained by Widen Enterprises.
*
* Note: This is the exact server-side code used by the S3 example
* on fineuploader.com.
*
* This example:
* - handles both CORS and non-CORS environments
* - handles delete file requests for both DELETE and POST methods
* - Performs basic inspections on the policy documents and REST headers before signing them
* - Ensures again the file size does not exceed the max (after file is in S3)
* - signs policy documents (simple uploads) and REST requests
* (chunked/multipart uploads)
* - returns a thumbnailUrl in the response for older browsers so thumbnails can be displayed next to the file
*
* Requirements:
* - PHP 5.3 or newer
* - Amazon PHP SDK (only if utilizing the AWS SDK for deleting files or otherwise examining them)
*
* If you need to install the AWS SDK, see http://docs.aws.amazon.com/aws-sdk-php-2/guide/latest/installation.html.
*/
// You can remove these two lines if you are not using Fine Uploader's
// delete file feature
//require 'aws-autoloader.php';
require 'vendor/autoload.php';
use Aws\S3\S3Client;
// These assume you have the associated AWS keys stored in
// the associated system environment variables
$clientPrivateKey = '<HIDDEN>';
// These two keys are only needed if the delete file feature is enabled
// or if you are, for example, confirming the file size in a successEndpoint
// handler via S3's SDK, as we are doing in this example.
$serverPublicKey = $_SERVER['PARAM1'];
$serverPrivateKey = $_SERVER['PARAM2'];
// The following variables are used when validating the policy document
// sent by the uploader:
$expectedBucketName = "<HIDDEN>";
// $expectedMaxSize is the value you set the sizeLimit property of the
// validation option. We assume it is `null` here. If you are performing
// validation, then change this to match the integer value you specified
// otherwise your policy document will be invalid.
// http://docs.fineuploader.com/branch/develop/api/options.html#validation- option
$expectedMaxSize = 25000000;
$method = getRequestMethod();
// This first conditional will only ever evaluate to true in a
// CORS environment
if ($method == 'OPTIONS') {
handlePreflight();
}
// This second conditional will only ever evaluate to true if
// the delete file feature is enabled
else if ($method == "DELETE") {
handleCorsRequest(); // only needed in a CORS environment
deleteObject();
}
// This is all you really need if not using the delete file feature
// and not working in a CORS environment
else if ($method == 'POST') {
handleCorsRequest();
// Assumes the successEndpoint has a parameter of "success" associated with it,
// to allow the server to differentiate between a successEndpoint request
// and other POST requests (all requests are sent to the same endpoint in this example).
// This condition is not needed if you don't require a callback on upload success.
if (isset($_REQUEST["success"])) {
verifyFileInS3(shouldIncludeThumbnail());
}
else {
signRequest();
}
}
// This will retrieve the "intended" request method. Normally, this is the
// actual method of the request. Sometimes, though, the intended request method
// must be hidden in the parameters of the request. For example, when attempting to
// send a DELETE request in a cross-origin environment in IE9 or older, it is not
// possible to send a DELETE request. So, we send a POST with the intended method,
// DELETE, in a "_method" parameter.
function getRequestMethod() {
global $HTTP_RAW_POST_DATA;
// This should only evaluate to true if the Content-Type is undefined
// or unrecognized, such as when XDomainRequest has been used to
// send the request.
if(isset($HTTP_RAW_POST_DATA)) {
parse_str($HTTP_RAW_POST_DATA, $_POST);
}
if (isset($_POST['_method'])) {
return $_POST['_method'];
}
return $_SERVER['REQUEST_METHOD'];
}
// Only needed in cross-origin setups
function handleCorsRequest() {
// If you are relying on CORS, you will need to adjust the allowed domain here.
header('Access-Control-Allow-Origin: *');
}
// Only needed in cross-origin setups
function handlePreflight() {
handleCorsRequest();
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');
}
function getS3Client() {
global $serverPublicKey, $serverPrivateKey;
return S3Client::factory(array(
'key' => $serverPublicKey,
'secret' => $serverPrivateKey
));
}
// Only needed if the delete file feature is enabled
function deleteObject() {
getS3Client()->deleteObject(array(
'Bucket' => $_POST['bucket'],
'Key' => $_POST['key']
));
}
function signRequest() {
header('Content-Type: application/json');
$responseBody = file_get_contents('php://input');
$contentAsObject = json_decode($responseBody, true);
$jsonContent = json_encode($contentAsObject);
if (!empty($contentAsObject["headers"])) {
signRestRequest($contentAsObject["headers"]);
}
else {
signPolicy($jsonContent);
}
}
function signRestRequest($headersStr) {
if (isValidRestRequest($headersStr)) {
$response = array('signature' => sign($headersStr));
echo json_encode($response);
}
else {
echo json_encode(array("invalid" => true));
}
}
function isValidRestRequest($headersStr) {
global $expectedBucketName;
$pattern = "/\/$expectedBucketName\/.+$/";
preg_match($pattern, $headersStr, $matches);
return count($matches) > 0;
}
function signPolicy($policyStr) {
$policyObj = json_decode($policyStr, true);
if (isPolicyValid($policyObj)) {
$encodedPolicy = base64_encode($policyStr);
$response = array('policy' => $encodedPolicy, 'signature' => sign($encodedPolicy));
echo json_encode($response);
}
else {
echo json_encode(array("invalid" => true));
}
}
function isPolicyValid($policy) {
global $expectedMaxSize, $expectedBucketName;
$conditions = $policy["conditions"];
$bucket = null;
$parsedMaxSize = null;
for ($i = 0; $i < count($conditions); ++$i) {
$condition = $conditions[$i];
if (isset($condition["bucket"])) {
$bucket = $condition["bucket"];
}
else if (isset($condition[0]) && $condition[0] == "content-length-range") {
$parsedMaxSize = $condition[2];
}
}
return $bucket == $expectedBucketName && $parsedMaxSize == (string)$expectedMaxSize;
}
function sign($stringToSign) {
global $clientPrivateKey;
return base64_encode(hash_hmac(
'sha1',
$stringToSign,
$clientPrivateKey,
true
));
}
// This is not needed if you don't require a callback on upload success.
function verifyFileInS3($includeThumbnail) {
global $expectedMaxSize;
$bucket = $_POST["bucket"];
$key = $_POST["key"];
// If utilizing CORS, we return a 200 response with the error message in the body
// to ensure Fine Uploader can parse the error message in IE9 and IE8,
// since XDomainRequest is used on those browsers for CORS requests. XDomainRequest
// does not allow access to the response body for non-success responses.
if (isset($expectedMaxSize) && getObjectSize($bucket, $key) > $expectedMaxSize) {
// You can safely uncomment this next line if you are not depending on CORS
header("HTTP/1.0 500 Internal Server Error");
deleteObject();
echo json_encode(array("error" => "File is too big!", "preventRetry" => true));
}
else {
$link = getTempLink($bucket, $key);
$response = array("tempLink" => $link);
if ($includeThumbnail) {
$response["thumbnailUrl"] = $link;
}
echo json_encode($response);
}
}
// Provide a time-bombed public link to the file.
function getTempLink($bucket, $key) {
$client = getS3Client();
$url = "{$bucket}/{$key}";
$request = $client->get($url);
return $client->createPresignedUrl($request, '+15 minutes');
}
function getObjectSize($bucket, $key) {
$objInfo = getS3Client()->headObject(array(
'Bucket' => $bucket,
'Key' => $key
));
return $objInfo['ContentLength'];
}
// Return true if it's likely that the associate file is natively
// viewable in a browser. For simplicity, just uses the file extension
// to make this determination, along with an array of extensions that one
// would expect all supported browsers are able to render natively.
function isFileViewableImage($filename) {
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
$viewableExtensions = array("jpeg", "jpg", "gif", "png");
return in_array($ext, $viewableExtensions);
}
// Returns true if we should attempt to include a link
// to a thumbnail in the uploadSuccess response. In it's simplest form
// (which is our goal here - keep it simple) we only include a link to
// a viewable image and only if the browser is not capable of generating a client-side preview.
function shouldIncludeThumbnail() {
$filename = $_POST["name"];
$isPreviewCapable = $_POST["isBrowserPreviewCapable"] == "true";
$isFileViewableImage = isFileViewableImage($filename);
return !$isPreviewCapable && $isFileViewableImage;
}
?>

Based on your follow-up comment explaining the specific issue:
So digging around I see the following error: XMLHttpRequest cannot load s3.amazonaws.com/dev-pre-content. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '192.168.1.215'; is therefore not allowed access.
The problem is with your bucket's CORS configuration. You'll need to be sure you have appropriate CORS rules associated with the specific bucket you are uploading to.

It was exactly what you said, I believe that should implement the policy signature. When you send the file directly to the S3 server, you must first inform the política assignature, so your javascript will pass the credentials that will be on your php file, so that after you send the files you want.
Here is a working example of política signature
$AWSbucket = 'yout burcket';
$AWSkey = 'your key';
$AWSsecret = 'your secret';
$acl = 'public-read';
// Get the file extension
$file = $_POST['name'];
$extension = substr($_POST['name'], strrpos($_POST['name'], '.')+1);
// Prepare the filename
$fileName = 'c' . sha1(uniqid(mt_rand(), true));
$key = 'arquivos/'.$fileName . '.' . $extension;
// Set the expiration time of the policy
$policyExpiration = gmdate('Y-m-d\TH:i:s\Z', strtotime('+24 hour'));
// Set the policy
$policy = str_replace("\n", "", '
{"expiration": "' . $policyExpiration . '",
"conditions": [
{"acl": "' . $acl . '"},
{"bucket": "' . $AWSbucket . '"},
{"success_action_status": "201"},
["starts-with", "$key", "' . $key . '"],
]
}');
// 1 - Encode the policy using UTF-8.
// 2 - Encode those UTF-8 bytes using Base64.
// 3 - Sign the policy with your Secret Access Key using HMAC SHA-1.
// 4 - Encode the SHA-1 signature using Base64.
// Prepare the signature
$b64 = base64_encode(utf8_encode($policy));
$signature = base64_encode(hash_hmac('sha1', $b64, $AWSsecret, true));
// Return the post information
echo json_encode(array(
'key' => $key,
'acl' => $acl,
'MinPartSize' => 25 * 1024 * 1024,
'policy' => $b64,
'signature' => $signature,
'AWSAccessKeyId' => $AWSkey,
'success_action_status' => 201,
'bucket' => $AWSbucket
));

display login error using Ajax and Grails

I'm developing a little application using Grails + Twitter BootStrap for the UI. In my index page, I have a form to login :
<g:form controller="user" action="login" id="form-login">
<h2>Please, log in</h2>
<g:textField name="userName" placeholder="Email address"/>
<g:passwordField name="password" type="password" placeholder="Password"/>
<button id="submitConnection" type="submit">Connection</button>
</g:form>
Here, is my user controller :
def login(){
String userName = params.userName
String password = params.password
User user = userName ? User.findByUserName(userName) : null
//If login succeed
if(user?.password == password){
session.user = user
redirect(action: 'index')
}
//If login failed
else{
render 'Email or password incorrect.'
}
}
I'm trying to use Ajax through JQuery. I'm not familiar with Ajax/JQuery, so I'm not sure that I'm doing well things. In fact, I would like to do an Ajax request on click on the submit button. So I wrote this in my js :
$('#submitConnection').click(function() {
var request = $.ajax({
url: "/user/login",
data: { userName: "dummy", password: "dummy"}
});
request.done(function ( data ) {
if( data ) {
console.log(data);
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
I would like when the login fails to fill in a div with an error message like 'login failed' and if it succeeds, just redirect to the index. I think I have to use JQuery to do this. Am I wrong ?
I don't really know what I have to modify/add in my controller to send something to the Ajax.
Thanks in advance for your help.
Best regards.

First, dealing with your controller, sending a redirect back to an ajax request won't really suffice. And when the auth fails, how does your javascript know? So we should adjust your controller code a bit:
def login(){
String userName = params.userName
String password = params.password
User user = userName ? User.findByUserName(userName) : null
//If login succeed
if(user?.password == password){
session.user = user
render(contentType: 'text/json') {
[success: true, message: 'Login successful']
}
}
//If login failed
else{
render(contentType: 'text/json') {
[success: false, message: 'Email or Password incorrect']
}
}
}
Now as to your javascript, I'd start here:
$('#submitConnection').click(function(e) {
e.preventDefault(); // prevents normal event of button submitting form
$.post("/user/login", {userName: "dummy", password: "dummy"}, function(data) {
if (data.success) {
window.location = "some/path";
} else {
$("#error-message").html(data.message).show();
}
});
});
And then your HTML:
<g:form controller="user" action="login" id="form-login">
<h2>Please, log in</h2>
<div id="error-message" class="hide"></div>
<g:textField name="userName" placeholder="Email address"/>
<g:passwordField name="password" type="password" placeholder="Password"/>
<button id="submitConnection" type="submit">Connection</button>
</g:form>

How to pass AJAX arguments to the extbase action?

Now that I managed to get values from the database, I want to specify more what I want to be passed.
From a select box that reacts to the event function below, I want to read out a value (uid of a record) and pass it to my ajaxAction:
var uid;
$('#mySelectBox').change(function() {
arguments = $(this).attr('value');
var uri = '<f:uri.action arguments="{uid: '+uid+'}" action="ajax" controller="Mycontroller1" pageType="89657201" />';
jQuery.getJSON(uri, function(result) {
// do something
});
});
I tried it with arguments, no idea if that is the right way. Additionally, as Marcus Biesioroff suggested, I should save my JS into a separate file, but then I would have to write the uri on my own instead of the Fluid way, right?
My ajaxAction looks like this:
public function ajaxAction($uid) {
$dataFromRepo = $this->myRepository->findByUid($uid);
$resultArray = array(
"field1" => $dataFromRepo->getField1(),
"field2" => $dataFromRepo->getField2(),
"field3" => $dataFromRepo->getField3(),
"field4" => $dataFromRepo->getField4(),
);
return json_encode($resultArray);
}
I'm sure that the uid is not passed correctly, everything else works.

There are some mistakes:
You can't break vievhelper's syntax with JS even if it's placed in view, you need to pass full path of the action from <f:uri.action />
you cannot place this JS in view, because it contains curly brackets there's other description of the issue
you need to call ajax function from external file and pass to it action's link and uid separately, and then add the
in the view:
<script type="text/javascript">
var actionsPathFromViewHelperSetInTheView
= '<f:uri.action action="ajax" controller="Mycontroller1" pageType="89657201" />';
</script>
<script type="text/javascript" src="path/to/ext/Public/yourExternal.js"></script>
<!-- of course this field may/should be created with Fluid's viewhelper -->
<select id="mySelectBox" onchange="performAjaxCall(this)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
in the yourExternal.js (of course you need to change tx_yourextkey_yourplugin prefix to your own)
function performAjaxCall(selectFieldObj) {
$.ajax({
url: actionsPathFromViewHelperSetInTheView,
data:{
"tx_yourextkey_yourplugin[uid]":selectFieldObj.value
},
success:function (data) {
// do something with your json
alert('Load was performed.');
}
});
}
in your controller:
public function ajaxAction() {
// try to always validate the incoming arguments
if (!$this->request->hasArgument('uid') || intval($this->request->getArgument('uid')) == 0) {
header('HTTP/1.1 400 Bad Request');
return json_encode(array('error'=> 'Bad request'));
}
$uid = intval($this->request->getArgument('uid'));
$dataFromRepo = $this->myRepository->findByUid($uid);
if ($dataFromRepo == null) {
header('HTTP/1.1 404 Not found');
return json_encode(
array('error'=> 'Not found or you have no access or something else... happens...')
);
}
$resultArray = array(
"field1" => $dataFromRepo->getField1(),
// etc...
);
return json_encode($resultArray);
}

Resources