I was wondering if there's any option that after image upload the image source will be <img src="/uploads/image.jpg" /> rather than <img src="http://example.com/uploads/image.jpg" />?
I can't find it anything about this and I have lots of content that it's added on localhost and when I upload it to production I'll have to manually change the links
Any suggestions?
Perhaps can you try to find/replace when image inserted. Something like this :
$(".selector").on('editable.imageInserted', function (e, editor, img) {
var source = img.replace('www.host.com','');
$('.img_class').attr('src',source);
});
I found the solutions as answered by the creator of froala https://github.com/froala/wysiwyg-editor/issues/445
Thanks
Easiest way to do this is using Froala's image server upload example and simply adding the domain at the beginning of the link
<?php
// Include the editor SDK.
require '/path/to/wysiwyg-editor-php-sdk-master/lib/FroalaEditor.php';
// Store the image.
try {
$response = FroalaEditor_Image::upload('/path/to/upload/');
$response->link = "https://www.example.com" . $response->link;
echo stripslashes(json_encode($response));
}
catch (Exception $e) {
http_response_code(404);
}
?>
Related
I am stuck at last point of my application, i am supposed to display user form in PDF which works fine on desktop browsers as they has pdf viewer built in, but for Android / iOS its not working as pdf viewer is missing.
So i was trying to use PDF.js to display it, (to be honest, this is very widely used but documentation is lacking), only catch is i am getting data in base64 format. PDF.js has example on site which shows how to render the base64 data but its not PDF, for that displaying PDF as "PDF" i need to user their "viewer.html" but that does not take base64 data?
closest i have come to Pdf.js: rendering a pdf file using base64... on stack overflow, but i dont know how to use it after PDFJS.getDocument(pdfAsArray)?.
Other link that came across was other link
I dont want to rely on Google / Third party PDF viewer as i dont know how long they will support this.
There are no end-to-end answers on this topic in community so here is my attempt to put something here. (maybe it will help others)
Okay, PDF.js is one way of showing PDF in browser, specially when you don't want to rely on PDF plugin to be installed. In my case, my application generates report in PDF and that can be viewed before downloading but on handheld devices it was not working because of missing PDF viewer plugin.
In my case PDF was sent to browse in base64 string, that I can use to display PDF with <object src="base64-data"...></object>. This works like charm on Chrome / FF but switch to mobile view and it stops working.
<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Report.pdf">
<p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p>
</object>
In above code it will try to show the PDF or fall back to <p> and show error message. And I Was planning to add the PDF viewer at this point, PDF.js was the choice but was not able to display it. One example on PDF.js with Base64 data shows how to do this but that renders it as an Image not PDF, and I was not able to find solution for that and hence the question, here is what I did,
First add the JavaScript code to convert base64 to array
convert to blob and use viewer.html file packaged with PDF.js to display it as PDF
In case if you are wondering why base64 data, then answer is simple I can create the PDF, read it, send the data to client and delete the file, I don't have to run any cleaner service/cron job to delete generated PDF files
Few Things To Note
Below code is using Flask + Jinja2, change the way base64 is read in html if you are using something else
viewer.html needs to be changed to have required js & css files in proper location (by default their location is relative; you need them to be referred from static folder)
viewer.js looks for pdf.worker.js in predefined location, change that in case its throwing error as above file not found.
viewer.js might throw file origin does not match viewer error in that case as a quick fix comment the code which throws this error and see if that solves the issue (look for that error in viewer.js)
I am not the author of below code, I have just put it together from different places.
Now to the code (so PDF will be displayed when user clicks on button with id="open_id")
Jquery
var pdfDataX = '{{ base64Pdf }}';
var BASE64_MARKER = ';base64,';
PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}";
$('#open_id').click(function() {
PDFJS.disableWorker = true;
var pdfAsDataUri = "data:application/pdf;base64," + pdfDataX ;
PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}";
// Try to show in the viewer.html
var blob = base64toBlob(pdfDataX, 'application/pdf');
var url = URL.createObjectURL(blob);
var viewerUrl = "{{ url_for('static', filename='viewer.html') }}" + '?file=' + encodeURIComponent(url);
$('#pdfViewer').attr('src', viewerUrl);
// Finish
var mdObj = $('#pdfbin');
mdObj.hide();
mdObj.attr('data', pdfAsDataUri);
mdObj.show();
$('#myModal').modal();
});
var base64toBlob = function(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i=0; i<slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
$('.save').click(function(e) {
e.preventDefault();
var blob = base64toBlob(pdfDataX, 'application/pdf');
saveAs(blob, 'abcd.pdf'); // requires https://github.com/eligrey/FileSaver.js/
return false;
});
HTML
<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Resume.pdf">
<p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p>
<iframe id="pdfViewer" style="width: 100%; height: 100%;" allowfullscreen="" webkitallowfullscreen=""></iframe>
</object>
Hope this will be useful for others in future.
I'm using Laravel php and Appium.
I want Appium to download the .apk/.ipa file from a certain route which returns the downloaded file.
App path in Appium: localhost/downloadApp
public function downloadApp(Request $request) {
...
return response()->download($path);
}
If I try this way, it doesn't work and I get an error "[Support] Error: Plist file doesn't exist: '.../Info.plist". I don't know why because if I call localhost/downloadApp in my browser, it downloads the file.
But if I use the direct link (http://localhost/uploads/HelloWorld.ipa) in Appium, it works.
The path must point to an actual file.
You can download the file itself from your code but you need to make sure that:
The file has completed to download before you set up the driver
The path to the downloaded file is correct, make sure the name of the file and the download location is the same as what you set in the capabilities ("localhost/downloadApp" doesn't seem like the correct download path)
I have the same problem, I just use return redirect ($file_path); and that works fine for apk file. For security, I also use the POST method to start download. This is my code:
//blade code :
<li class="nav-item">
<form method="POST" action="{{url('/files/download')}}">
{{ csrf_field()}}
<button class="btn btn-primary fa fa-download"> download </button>
</form>
</li>
//Route code :
Route::post('/files/download', 'FilesController#download');
//Controller code :
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\File;
use App\Http\Controllers\Controller;
class FilesController extends Controller
{
public function download($file)
{
$file_path = 'your folder path/file.apk';
// if your file in public use $path = "/your folder/file.apk"
// if your file is in out of public you may use two points like that: $path = "../your folder/file.apk"
return redirect ($file_path);
}
}
I would like to display a file icon in one of my views.
#System.Drawing.Icon.ExtractAssociatedIcon(#"C:/Users/User1/Desktop/test.txt")
Shouldn't this display the icon? Do I need a img tag or something else?
Thanks
You cannot just have the file contents on the browser. You will need to use an <img> tag and have the server return the file stream:
Quick disclaimer: I do not have VS with me, so this is just pseudo-code:
public FileResult Icon()
{
var stream = System.Drawing.Icon.ExtractAssociatedIcon(#"C:/Users/User1/Desktop/test.txt")
return new FileStreamResult(stream, "image/png");
}
Then, just reference the action method:
<img src="/MyController/Icon">
I am using the jquery-ui version of Blueimp upload and I like how I can format a table and display files that were just uploaded. But I'd like to use it as a file manager as well so I want to preload existing files and display than as if they were just uploaded. How can I do that? A sample link to where someone else has addressed this would suffice. BTW, I am uploading several different file types, not just images.
Thanks!
Or without an ajax call:
Prepare array containing details of existing files, e.g:
var files = [
{
"name":"fileName.jpg",
"size":775702,
"type":"image/jpeg",
"url":"http://mydomain.com/files/fileName.jpg",
"deleteUrl":"http://mydomain.com/files/fileName.jpg",
"deleteType":"DELETE"
},
{
"name":"file2.jpg",
"size":68222,
"type":"image/jpeg",
"url":"http://mydomain.com/files/file2.jpg",
"deleteUrl":"http://mydomain.com/files/file2.jpg",
"deleteType":"DELETE"
}
];
Call done callback
var $form = $('#fileupload');
// Init fileuploader if not initialized
// $form.fileupload();
$form.fileupload('option', 'done').call($form, $.Event('done'), {result: {files: files}});
I also had the same problem. It is not magic how it works. I recommend to examine the UploadHandler.php file. Then you will be able to modify this plugin accordind to your needs.
The code above in your second post is just an ajax call to the uploader script (by default index.php in server/php/ folder). The call method is set to "get" by default in $.ajax object.
Open the UploadHandler.php file and go to the class method "initialize(...)". You will see how the call with "get" handled. UploadHandler calls the class method this->get(.:.) to prepare and send the list of existing files. If you use other upload directory, you need pass a parameter to the UploadHänder. Simply chage the url property in the $.ajax object like :
url: $('#fileupload').fileupload('option', 'url')+'?otherDir='+myDir,
then you should initialize the option property of the UploadHandler before you create a new UploadHandler object like this:
$otherDir = trim($_REQUEST['otherDir']);
$otherDir_url = [anyURL] .'/'.$otherDir;//so that the files can be downloaded by clicking on the link
$options = array(
'upload_dir'=> $otherDir,
'upload_url'=> $otherDir_url,
);
$upload_handler = new UploadHandler($options);
Found the code in the main js file... It wasn't obvious how it worked. Got it working just fine.
// Load existing files:
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).done(function (result) {
$(this).fileupload('option', 'done').call(this, null, {result: result});
});
If any of you looking at this is doing it in .NET, find this: (for me it is in application.js
For a fairly recent version, there is a function
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function(files) {
files = somethingelse;
var fu = $('#fileupload').data('fileupload');
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function() {
// Fix for IE7 and lower:
$(this).show();
});
});
Inside the application.js
I'm doing it for .NET though, and actually needed this gone.
Then set your somethingelse to either your files or "" depending on what you want to show. If you remove the line files = somethingelse then it will preload all files from the folder.
I want to redirect to another page in Phonegap.
I have written the following code in javascript but it is not getting redirected:
window.location.href = "http://www.google.com";
Can anyone advise why it is not working?
You have to allow navigation of external sites inside your application by configuring the whitelist.
You have to use allow-navigation tag like this:
<allow-navigation href="http://www.google.com/*" />
Try doing the following:
Open your file Cordova.plist file
Right click on ExternalHosts -> Add Row
Set the String value of the new added row to *.
So, you should have your new added row like this:
Item0 String *
Normally, you should replace * with the external URL that you want to provide access to (like http://www.google.com for instance), but I used * to make sure that the problem comes from there or not.
For more information, check the "Domain Whitelist Guide" section of the online doc: http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide .
Here's a simple working example using window.location.href:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function init() {
window.location.href = "http://www.google.com";
}
</script>
</head>
<body onload="init();">
</body>
</html>
Let me know if this works.
Most likely it's the page you are moving to. Does that page have the phongap.js files in it etc?
Try a simple test: create a new HTML page with just the basic elements and a couple words in the body so you know you are there. Save it as test.html. Now try window.location="test.html".
If that works then you know it's something in the new page.
Good luck!
Have you checked your framework initializations? Make sure jquery and phonegap are completely loaded before you try to change the page. Or else phonegap will hang and break.
Take a look here: Correct way of using JQuery-Mobile/Phonegap together?
Working fine for me with Cordova 4. Can you try remote debugging with Google Chrome and see what happen in the Javascript console?
Try without href:
window.location = "http://www.google.com";
if you use like window.location or window.location.href and it stll doesn't work in IOS or safrai.
you can use this:
var isAndroid = !!navigator.userAgent.match(/android/ig);
var targetUrl = 'your url';
window.location = targetUrl;
if(!isAndroid) {
var doc = window.document,
ifr = doc.createElement('iframe');
ifr.src = targetUrl;
ifr.style.cssText = 'display:none;';
doc.body.appendChild(ifr);
}