blueimp / jQuery-File-Upload : Email notification on upload - jquery-file-upload

I'm using blueimp / jQuery-File-Upload, (via this tutorial to create a file uploaded) I would like to receive an email notification when a file has been uploaded, ideally with the file uploaded being emailed too.
From the docs, I understand that I need to use:
done: function (e, data) {
// data.result
// data.textStatus;
// data.jqXHR;
}
but.. I have no idea what to put inside here!
I'm using phpmailer.php so am trying stuff like:
done: function (e, data) {
$.ajax({
type: "POST",
url: "bin/signup_process.php",
data: "CV Uploaded via Rough Hill",
});
}
But I really have no clue how to get the uploaded file data from the script to send to phpmailer, or indeed how to even define the contents of the email.
Can anybody help me understand how I get the uploaded file data from jQuery-File-Upload and stick it in an email along with a message?
Many thanks in advance for any advice.

Related

Ionic 4 + WhatsApp share - Get receiver / contact details after I share my message

I am using Ionic 4 + SocialSharing-PhoneGap-Plugin.
After I share a message with my contact, how can I get back the contact's name/number and other info back in the promise, so that I can save it in the database?
I have the following code:
import { SocialSharing } from '#ionic-native/social-sharing/ngx';
constructor(private socialSharing: SocialSharing) { }
// Share message via WhatsApp
this.socialSharing.shareViaWhatsApp('Hi', null, null).then(() => {
// How to get the contact's details here, with whom
// I shared my message? Would like to get the name, number
// and all other contact info.
// Following Toast does not seem to trigger
this.toastService.presentToast('Successfully shared coupon on WhatsApp', 'success');
}).catch(() => {
// Sharing via WhatsApp is not possible. How to trigger a toast here as well?
});
How can I show a toast message immediately after return, so that I know that the message was shared successfully? As can be seen from the code, I have a toastService that shows the toast, but it never gets triggered. How can I trigger the toast after successfully sharing my message on WhatsApp, both in success & error cases?
To access contacts, you'll need a separate plugin like Contacts -- maybe get the contact first using that plugin and then use shareViaWhatsAppToPhone to share directly to that number.
The toast should work. From your example, it doesn't look like you've injected the ToastService into the class.

Set a playlist picture using the Deezer JS API

My client would like to create playlists on Deezer, and also add their own pictures against their creations.
I have a simple playlist creation call, using the Deezer JS SDK:
playlistObj = // already created object with title,
// description, images array and
// array of Deezer track IDs
DZ.api('user/me/playlists', 'POST',
// fields object
{
title : playlistObj.name,
picture_small: playlistObj.images[2].url,
picture_medium: playlistObj.images[1].url,
picture_big: playlistObj.images[0].url,
},
function (response) {
DZ.api('playlist/'+response.id+'/tracks', 'POST',
{ songs: playlistObj.tracks },
function (playlistTracksResponse) {
console.log(playlistTracksResponse); // true
}
);
}
);
The playlist and tracks create fine and I can see them on my account. However, the picture urls I'm setting and passing in the fields object and not being used by Deezer. Do the images need to be in a specific format? Do they need to be in a specific size? Can you only set images with a specific account type?
The documentation doesn't suggest that picture uploading is precluded, and I've tried various combinations of images from google image searches, of jpg, png and of a variety of sizes, including 200x200px as I can see on their site.
Any help?
I'm sorry, what you're trying to do isn't supported by the API. When you create a playlist, the only field you can set is title.
Call https://api.deezer.com/infos, you will get a JSon with un upload token.
Send a POST as form_data with a key « file » with your image content on https://upload.deezer.com/playlist/{playlistId}?access_token={accessToken}&upload_token={uploadToken}

Is it possible to source a local file resource in an <img>?

I have a need to point my image tags at a directory that is not part of my app.
The use-case is that this is a kiosk app for which the assets are delivered via Dropbox. So, the user will need to configure the app by pointing the fileSystem object at the required Dropbox directory and then the app will use that directory to source its media.
The fileSystem Entry returns a path that looks like:
~/Dropbox/and/so/on/and/so/forth
I'm trying to figure out if there's any way to use that either explicitly
a la
<img src="~/Dropbox/and/so/on/and/so/fort/image.png"/>
or via some hacky alternative like
<img src="file:///users/someuser/Dropbox/and/so/on/and/so/forth"/>
However all the various combinations I've tried produce a broken image - even though when I inspect the element and click on it in the console Chrome is able to view the image as a stand-alone entity, so I know the path is correct.
I feel like I'm overlooking something obvious, but can't find any documentation for how to correctly aim my resources at the file system.
You'd expect that the fileEntry.toURL() method returns the filesystem:..-URL that can be used to directly embed the image in the page. However, that is not the case because of http://crbug.com/148788.
If you're certain that you can always access the filesystem after requesting permissions, the most efficient solution to embed an image from the user's filesystem is to use blob:-URLs. Here is an example without any error handling:
// Within your app's code, somehow get a DirectoryEntry (or FileEntry):
chrome.fileSystem.chooseEntry({
type: 'openDirectory'
}, function(directoryEntry) {
// Assume that the user has selected the directory containing the images.
directoryEntry.getFile('path/to/img.png', function(fileEntry) {
fileEntry.file(function(file) {
var url = URL.createObjectURL(file);
// url looks like "blob:chrome-extension%3A//[extensionid]/[uuid]"
var img = new Image();
img.src = url;
document.body.appendChild(img);
});
});
});
If you don't know the image path in advance, then you could either enumerate the items in the directory using a DirectoryReader (created using directoryEntry.createReader()), or directly prompt for the FileEntry (and use fileEntry.file, etc., to get the blob:-URL).
To try out the previous snippet, use the following as manifest.json
{
"name": "FS App",
"version": "2",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
{"fileSystem": ["directory"]}
]
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('main.html');
});
main.html
<script src="main.js"></script> <!-- main.js = previous code -->
Create a directory that contains "path/to/img.png", load the app, launch the app and click on the just-created directory that contains that picture. You will see that the image is embedded in the app's document.
You don't use a file:// URL, nor do you use any --allow... exceptions. Once you have a FileEntry, you fetch the binary data from the image and form it into a data URL, which you can use directly as an img src. See my answer to this question: chrome packaged app image access
UPDATE: Given a File object (file), here's the code to set the src property of an image (img):
img.src = webkitURL.createObjectURL(file);
If you have a FileEntry, you can get its File via the file() method.
Are the assets in the user's Dropbox or yours? If they are yours, you should be able to get them using fetch after making them public.

ink-file-picker filepicker.io confirmation message upon upload

I am using Ink Filepicker to get uploaded files from visitors to my site.
It us uploading to my Amazon S3 - that's all fine.
Some users aren't sure that their files are being uploaded though ,so they are doing it multiple times and/or emailing in the file anyway.
Is there a simple way to get a confirmation message to display when the file is uploaded (like a popup message box)?
Thanks for any help you can offer
Chris
You can use the onSuccess callback function. This function will fire when the upload has been completed successfully. Here is a very basic example...
filepicker.pickAndStore({
mimetypes: 'image/*',
services: ['computer','url']
},
// onSuccess callback
function(data) {
$('body').append('<div class="modal">UPLOAD COMPLETE!</div>');
}
);

Google Chrome Extension - Accessing The DOM

I have been searching around the web to find out how to access the current tabs DOM to extract information out of a page from the background.html. So far I have had no luck, or at least nothing I could get to work properly.
To state the problem simply. I would like to get src of a iFrame on the page. Any Suggestions?
One way, you an treat this as a single one time request to the content-script which will fetch the dom you want to access.
http://code.google.com/chrome/extensions/messaging.html#simple
Basically, your content script sets up the listener:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
And your background page sends a single lived request:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
When you send your response, you send it as JSON data, you can fetch whatever you want (such as html, dom, text, etc).
That is currently the only way to let the background page know anything about the contents of a page. Remember you would need content scripts and tab permissions.