I have been trying to upload images to my Medium-editor using the Medium-editor-insert-plugin with Laravel5.5 for days without success.
To me it seems like the image is to passing to the sever and I don't know why.
I am using the latest release version of medium-editor-insert-plugin.
here is my javascript code to initiate the medium-insert-plugin:
$(function () {
$('.body-editable').mediumInsert({
editor: bodyEditor,
addons: {
images: {
fileUploadOptions: {
url: 'upload',
}
}
}
});
});
and the route to send the request to the back-end look like this.
// upload image route for MediumInsert plugin
Route::post('upload', 'PostsController#upload');
and inside my controller i am return all the request data like this:
public function upload(Request $request)
{
return array('data:'=> $request->all());
$upload_handler = new UploadHandler(array(
//'upload_dir' => public_path().'uploads/',
'upload_dir' => 'uploads/',
'upload_url' => 'posts/upload/',
));
}
but after use the plugin to insert an image to the editor i am get this error
But in my network response i am getting this.
{"data:":{"files":[{}]}}
Please can someone tell me what to do? have been trying to edited the plugin itself but no way till now.
You should probably return only the data object property.
{"files":[{}]}
Related
I have recently started learning Sveltekit and am working on a very basic project to practise. Here is the structure of the project:
|-routes/
| |-nextpage/
| └ +page.svelte
|+page.svelte
|+page.server.js
I got stuck trying to pass data from the +page.server.js to the +page.svelte located inside the nextpage/ route and I have no idea what to do.
In the main +page.svelte there is a component with a button that when pressed sends a FormData via POST request to the /results endpoint, triggering a server action called results within the +page.server.js. Then redirects to /nextpage.
Component in +page.svelte:
let myObject = {
//stuff
}
const handleSubmit = () => {
const formData = new FormData();
for(const name in myObject){
formData.append(name, myObject[name]);
}
let submit = fetch('?/results', {
method: 'POST',
body: formData
})
.finally(() => console.log("done"))
window.location = "/nextpage";
}
+page.server.js:
let myObject = {};
export const load = () => {
return {
myObject
}
}
export const actions = {
results: async({ request }) => {
const formData = await request.formData();
formData.forEach((value, key) => (myObject[key] = value));
console.log(myObject);
}
}
Now I would like to be able to show myObject in the +page.svelte in /nextpage, but the usual export let data does not work:
/nextpage +page.svelte:
<script>
export let data;
</script>
{data.myObject} //undefined`
What can I do? Thank you for your help.
OK guys, I guess all I needed was to use cookies. Since the object I was trying to pass between pages didn't need to be stored for longer than a page load, I don't think it would make sense to save it in a database. Instead, what did it in my case was to set a cookie with cookies.set('name', JSON.stringify(obj)); inside the action function in the main +page.server.js, and then get it back inside the load function of the /nextpage +page.server.js with const obj = cookies.get('name');. I'm not sure it was the cleanest way to do it, but it worked for me.
That does not work. Pages are fully separate, you cannot load data from one page into another.
If you want to share loaded data use a layout load function.
You can use +layout.js or sveltkit/stores.
sveltekit/stores are above the layout layer because they don't depend on the flow of the pages compared to the +layout.js layer which does depend.
cookies are processed locally.
I am using this native plugin to open a InAppBrowser. Also I want to inject a css and/or JS in that page, as in that page mentioned, I should use below code for css inject but it doesn't work:
browser.on('loadstop').subscribe(event => {
browser.insertCSS({ code: "body{color: red;" });
});
Can anyone help me?
You can execute javascript with below syntax
let promise = browser.executeScript({
code: '(function() {if(functionname) { return functionname(); }}())'
});
This will return promise
promise.then((values) => {
// process values here
});
where browser is instance of your inappbrowser for example -
const browser = this.iab.create('url', "_blank", this.options);
When using the Cameara to take a picture with destinationType: this.camera.DestinationType.FILE_URI, the resulting URL will not work to display the image. For example, when attempting to take a photo like this:
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = url;
}, (err) => {
console.log(err);
});
Attempting to display it as <img [src]="imagePath" > will result in an error (file not found).
The problem here is that the URL is in the file:///storage... path instead of the correct one based on localhost.
In previous versions of Ionic, this would be solved by using normalizeURL. This will not work on Ionic 4 (or at least I could not make it work).
To solve this issue, you will need to use convertFileSrc():
import {WebView} from '#ionic-native/ionic-webview/ngx';
...
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = this.webview.convertFileSrc(url);
}, (err) => {
console.log(err);
});
Now the image URL will be in the appropriate http://localhost:8080/_file_/storage... format and will load correctly.
See WKWebView - Ionic Docs for more information.
In my case, the following code works with me
const downloadFileURL = 'file:///...';
// Convert a `file://` URL to a URL that is compatible with the local web server in the Web View plugin.
const displayedImg = (<any>window).Ionic.WebView.convertFileSrc(downloadFileURL);
In case some gots here looking for the answer on ionic4, check this out
"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build
and look for the answer from #Alok Singh that's how I got it working on ionic4 and even works with livereload
UPDATE december 2021:
You have to install the new Ionic Webview
RUN:
ionic cordova plugin add cordova-plugin-ionic-webview
npm install #awesome-cordova-plugins/ionic-webview
Import it in app.module and your page where you wanna use it:
import { WebView } from '#awesome-cordova-plugins/ionic-webview/ngx';
image = "";
constructor(private webview: WebView){}
Then this will work:
this.camera.getPicture(options).then((imageData) => {
this.image = this.webview.convertFileSrc(imageData)
}, (err) => {
// Handle error
});
And show it in the HTML page:
<img [src]="image" alt="">
I'm developing ionic 2 app. I'm trying to get high quality image and then resize it to avatar photo.
My code:
_FBUserProfile() {
return new Promise((resolve, reject) => {
Facebook.api('me?fields=id,name,email,first_name,last_name,picture.width(600).height(600).as(picture_small),picture.width(360).height(360).as(picture_large)', [])
.then((profileData) => {
console.log(JSON.stringify(profileData));
return resolve(profileData);
}, (err) => {
console.log(JSON.stringify(err));
return reject(err);
});
});
}
But, the photo isn't good quality, since I guess I did something wrong with the resize in this line:
picture.width(600).height(600).as(picture_small),picture.width(360).height(360).as(picture_large)', [])
How can I get good quality of the photo?
If you want to get the public profile picture of the user and you know the user id from the api call then use this url for picture
profileData.picture="https://graph.facebook.com/"+profileData.id+"/picture?width=1024&height=1024";
You've got a couple of solutions, like using type large
id,name,email,first_name,last_name,picture.type(large)
As explained here: https://developers.facebook.com/docs/graph-api/reference/user/picture/
Know if it's possible to access the iPhone compass in Safari using JavaScript? I see how the GPS can be accessed, but I can't figure out the compass.
On iOS, you can retrieve the compass value like this.
window.addEventListener('deviceorientation', function(e) {
console.log( e.webkitCompassHeading );
}, false);
For more informations, read the Apple DeviceOrientationEvent documentation.
Hope this helps.
You cannot access that information via javascript, unless you're using something like iPhoneGap
At the time this was true, in iOS 5 you can use the compass heading in JS. https://developer.apple.com/documentation/webkitjs/deviceorientationevent/1804777-webkitcompassheading
For Android it works auto, for iOS it needs to be clicked to start it.
Here's a part of code you can use for that
startBtn.addEventListener("click", startCompass);
function startCompass() {
if (isIOS) {
DeviceOrientationEvent.requestPermission()
.then((response) => {
if (response === "granted") {
window.addEventListener("deviceorientation", handler, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
} else {
window.addEventListener("deviceorientationabsolute", handler, true);
}
}
function handler(e) {
const degree = e.webkitCompassHeading || Math.abs(e.alpha - 360);
}
Full tutorial is here, try demo also
https://dev.to/orkhanjafarovr/real-compass-on-mobile-browsers-with-javascript-3emi
I advise you to use LeafletJS with this plugin
https://github.com/stefanocudini/leaflet-compass
very simple to use with events and methods.
You can try a demo here:
https://opengeo.tech/maps/leaflet-compass/