I am using FU-5.0.8 on Ubuntu14, apache2 php5. I successfully created page to drag n drop file, create signature and upload to my AWS S3 bucket.
I then integrated that code into an existing form, using the qq-form. The FU element and the form are generated correctly, I am able to enter data and the data is posted to my DB including the key file name generated by FU.
Issue 1: FU is not pointing to the bucket I have identified in my script. Instead of the correct bucket as before, it make my domain the target bucket name.
Issue 2: FU provides a progress bar and shows the upload is complete and returns 200. I don't know how this is possible, do FU check that the file actually exists upon completion?
Here are the standalone upload script and the script with the form. As you can see they have an identical endpoint. I have included the POST created from the qq-form where you can see the endpoint is incorrect.
FU in the JSON POST is setting the bucket to www.biggytv.com, which does not exist. It should got to btv_upload_org.s3.amazonaws.com
You assistance is appreciate.
FORM CODE
<form action="https://www.biggytv.com/btvChannels/FSsubmit.php" id="qq-form" class="span6">
<div id="fineuploader-s3" class="span6"></div>
<div class="form-group span2">
<label>Program Title</label>
<input type = "text" class="span4" name="program_title" maxlength="200" autofocus="" required>
</div>
<div class="form-group span6">
<label>Program Description</label>
<textarea name="description" maxlength="1000" class="span8" id="count_me" placeholder="Please do not include links in the Program Description. Add any links to content on other sites as part of your profile." required></textarea>
</div>
<div class="form-group span5">
<label>Video Language</label>
<select name="vid_language" class="span4" required>
<option value=""></option>
<?php $language->data_seek(0);
while($language_row = $language->fetch_assoc()){
$languageid = $language_row['short'];
$languagename = $language_row['name'];
echo "<option value=\"$languageid\">
$languagename
</option>";
}?>
</select>
</div>
<div class="form-group span5">
<label>Target Audience</label>
<select name="Audience_DART1" class="span4" required>
<option value=""></option>
<?php $audience->data_seek(0);
while($audience_row = $audience->fetch_assoc()){
$audienceid = $audience_row['tar_aud_code'];
$audiencename = $audience_row['tar_aud_name'];
echo "<option value=\"$audienceid\">
$audiencename
</option>";
}?>
</select>
</div>
<div class="form-group span5">
<label>Genre</label>
<select name="genre" class="span4" required>
<option value=""></option>
<?php $genre->data_seek(0);
while($genre_row = $genre->fetch_assoc()){
$genreid = $genre_row['genre_id'];
$genrename = $genre_row['genre_name'];
echo "<option value=\"$genreid\">
$genrename
</option>";
}?>
</select>
</div>
<div class="form-group span5">
<label>Rating</label>
<select name="Rating_DART" class="span4" required>
<option value=""></option>
<?php $rating->data_seek(0);
while($rating_row = $rating->fetch_assoc()){
$dartid = $rating_row['dart_rating'];
$dartname = $rating_row['dart_rating_name'];
echo "<option value=\"$dartid\">
$dartname
</option>";
}?>
</select>
</div>
<input type="hidden" name="content_owner_name" value=<?php echo $content_owner_name;?>>
<input type="hidden" name="channel_id" value="801102">
<div class="span6 offset2">
<input id="submitButton" type="submit" value="Submit" class="span4">
</div>
</form>
QQ-FORM
jQuery(document).ready(function ($) {
$('#fineuploader-s3').fineUploaderS3({
request: {
endpoint: "btv_upload_org.s3.amazonaws.com",
accessKey: "XXXXXXXX"
},
template: "qq-template",
signature: {
endpoint: "/finesig/"
},
forceMultipart: {
enabled: true
},
debug: true,
cors: {
expected:true,
},
resume: {
enabled: true
},
objectProperties: {
acl: "public-read"
},
validation: {
itemLimit: 1,
sizeLimit: 150000000,
acceptFiles: "video/mp4, video/quicktime, video/x-flv, video/x-ms-wmv",
allowedExtensions: ["mp4", "mov", "flv", "wmv"],
},
})
});
POST JSON
JSON
conditions
[Object { acl="public-read"}, Object { bucket="www.biggytv.com"}, Object { Content-Type="video/mp4"}, 12 more...]
0
Object { acl="public-read"}
1
Object { bucket="www.biggytv.com"}
2
Object { Content-Type="video/mp4"}
3
Object { success_action_status="200"}
4
Object { key="e001946c-a472-4412-9854-b44fede53e72.mp4"}
5
Object { x-amz-meta-program_title="Marcus%20Johns"}
6
Object { x-amz-meta-description="Marcus%20Johns"}
7
Object { x-amz-meta-vid_language="en"}
8
Object { x-amz-meta-audience_dart1="U"}
9
Object { x-amz-meta-genre="6"}
10
Object { x-amz-meta-rating_dart="G"}
11
Object { x-amz-meta-content_owner_name="MarcusJohns"}
12
Object { x-amz-meta-channel_id="801102"}
13
Object { x-amz-meta-qqfilename="7920637590280230638.mp4"}
14
["content-length-range", "0", "150000000"]
expiration
"2014-10-14T00:11:08.742Z
Uploader Log
[Fine Uploader 5.0.8] Sending simple upload request for 0
custom.....0.8.js (line 207)
[Fine Uploader 5.0.8] Submitting S3 signature request for 0
custom.....0.8.js (line 207)
[Fine Uploader 5.0.8] Sending POST request for 0
custom.....0.8.js (line 207)
POST https://www.biggytv.com/finesig/
200 OK
552ms
custom.....0.8.js (line 3810)
[Fine Uploader 5.0.8] Sending upload request for 0
custom.....0.8.js (line 207)
POST https://www.biggytv.com/btvChannels/FSsubmit.php
200 OK
938ms
custom.....0.8.js (line 9849)
[Fine Uploader 5.0.8] Received response status 200 with body: Array
(
[key] => 05a829e8-bea1-44f6-b35d-1f620f1043af.mp4
[AWSAccessKeyId] => XXXXXXXXX
[Content-Type] => video/mp4
[success_action_status] => 200
[acl] => public-read
[x-amz-meta-program_title] => Marcus%20John
[x-amz-meta-description] => Mar
[x-amz-meta-vid_language] => en
[x-amz-meta-audience_dart1] => U
[x-amz-meta-genre] => 6
[x-amz-meta-rating_dart] => G
[x-amz-meta-content_owner_name] => MarcusJohns
[x-amz-meta-channel_id] => 801102
[x-amz-meta-qqfilename] => 7920637590280230638.mp4
[policy] => eyJleHBpcmF0aW9uIjoiMjAxNC0xMC0xNFQwMDozNzoxNS44NjZaIiwiY29uZGl0aW9ucyI6W3siYWNsIjoicHVibGljLXJlYWQifSx7ImJ1Y2tldCI6Ind3dy5iaWdneXR2LmNvbSJ9LHsiQ29udGVudC1UeXBlIjoidmlkZW8vbXA0In0seyJzdWNjZXNzX2FjdGlvbl9zdGF0dXMiOiIyMDAifSx7ImtleSI6IjA1YTgyOWU4LWJlYTEtNDRmNi1iMzVkLTFmNjIwZjEwNDNhZi5tcDQifSx7IngtYW16LW1ldGEtcHJvZ3JhbV90aXRsZSI6Ik1hcmN1cyUyMEpvaG4ifSx7IngtYW16LW1ldGEtZGVzY3JpcHRpb24iOiJNYXIifSx7IngtYW16LW1ldGEtdmlkX2xhbmd1YWdlIjoiZW4ifSx7IngtYW16LW1ldGEtYXVkaWVuY2VfZGFydDEiOiJVIn0seyJ4LWFtei1tZXRhLWdlbnJlIjoiNiJ9LHsieC1hbXotbWV0YS1yYXRpbmdfZGFydCI6IkcifSx7IngtYW16LW1ldGEtY29udGVudF9vd25lcl9uYW1lIjoiTWFyY3VzSm9obnMifSx7IngtYW16LW1ldGEtY2hhbm5lbF9pZCI6IjgwMTEwMiJ9LHsieC1hbXotbWV0YS1xcWZpbGVuYW1lIjoiNzkyMDYzNzU5MDI4MDIzMDYzOC5tcDQifSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwiMCIsIjE1MDAwMDAwMCJdXX0=
[signature] => d48Ibli+V6/RmN3bUUZKVJ0woew=
)
custom.....0.8.js (line 207)
[Fine Uploader 5.0.8] Simple upload request succeeded for 0
Update
In the FU documentation you referred to "Integrating with existing html forms", the "simple example" 'action' is set to a script not a S3 bucket, that is why I am confused.
However, I have configured my script in the manner of your answer.
When I set the Action to the bucket, the uploadSuccess: {endpoint} POST does not include any of my form data, just key, uuid,name,bucket,etag.
If I set the Action as to https://www.biggytv.com/btvChannels/FSsubmit.php, the form data is sent in the POST and FU returns a 200 that the file was uploaded to www.biggytv.com, a bucket that does not exist.
So my issue is the uploadSuccess: {endpoint} is not including any of my form data in the POST.
Thank you.!
The action attribute in the form serves the same purpose as the request.endpoint option. You should leave the request.endpoint option off of your JavaScript configuration. The action attribute will define the S3 endpoint where your files will be uploaded. If you want the file to be sent to "btv_upload_org.s3.amazonaws.com", then that should be the value of the form's action attribute. Again, leave request.endpoint off your JavaScript config.
In your JavaScript config, you can (and must) define a signature.endpoint option. Fine Uploader will send a POST to this endpoint to sign each request before a request is sent to the S3 endpoint defined in the action attribute.
You may also define an uploadSuccess endpoint in your JavaScript config. Fine Uploader will POST to this location when the file is successfully in S3.
You can find all information regarding form support on the associated feature page.