Hi I've already tried link from github and other SO questions. None of them solved my problem (SO-1 , SO-2, github).
So Here is my code snippet:
require(
[ 'https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js',
'https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js',
'https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js',
'upload/jquery.iframe-transport',
'upload/jquery.fileupload-ui'
],function(){
console.log("new action called ");
}
);
in a folder "upload" i've below files:
jquery.fileupload-audio.js
jquery.fileupload-image.js
jquery.fileupload-process.js
jquery.fileupload-ui.js
jquery.fileupload-validate.js
jquery.fileupload-video.js
jquery.fileupload.js
jquery.iframe-transport.js
load-image.js
tmpl.js
canvas-to-blob.js
After adding all above files, still in my console I've bunch of errors. out of them below two are actually doesn't make sense.
js/jquery.fileupload-image.js : 23 'load-image-exif'
js/jquery.fileupload-image.js : 24 'load-image-ios'
I can't find files with those names in official git repo. can anyone suggest an idea how to get it working (a fiddle would be a gret help).
CH
I've manage to get the blueimp fileupload working after exploring every individual files. The problem is coming from require js dependencies, so if u are looking solution to use require js to load blueimp fileupload here is the solution.
Download latest blueimp fileupload release https://github.com/blueimp/jQuery-File-Upload/releases
Remove all unnecessary files (All .html files, .json, .md, server folder, test folder and app.js from js folder). I just personally don't need those file, u can keep them if u want. I just like to keep thing tidy and clean. ^^
I've manually grabbed load-image-exif.js, load-image-ios.js, load-image-meta.js, load-image, tmpl.min.js and put them in vendor folder, where jquery.ui.widget.js is. So i cd to fileupload vendor folder and just curl grab these files like following
curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image-meta.js
curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image-ios.js
curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image-exif.js
curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image.js
curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Templates/master/js/tmpl.min.js
have these path setting in ur require js config
paths: {
jquery: '//code.jquery.com/jquery-1.11.0.min',
// redefined blueimp fileupload path
"jquery.fileupload": "/jquery-file-upload/js/jquery.fileupload",
"jquery.fileupload-ui": "/jquery-file-upload/js/jquery.fileupload-ui",
"jquery.fileupload-image": "/jquery-file-upload/js/jquery.fileupload-image",
"jquery.fileupload-audio": "/jquery-file-upload/js/jquery.fileupload-audio",
"jquery.fileupload-video": "/jquery-file-upload/js/jquery.fileupload-video",
"jquery.fileupload-validate": "/jquery-file-upload/js/jquery.fileupload-validate",
"jquery.fileupload-process": "/jquery-file-upload/js/jquery.fileupload-process",
"jquery.iframe-transport": "/jquery-file-upload/js/jquery.iframe-transport",
"tmpl": "/jquery-file-upload/js/vendor/tmpl.min",
"load-image": "/jquery-file-upload/js/vendor/load-image",
"load-image-ios": "/jquery-file-upload/js/vendor/load-image-ios",
"load-image-exif": "/jquery-file-upload/js/vendor/load-image-exif",
"load-image-meta": "/jquery-file-upload/js/vendor/load-image-meta",
"jquery.ui.widget": "/jquery-file-upload/js/vendor/jquery.ui.widget",
}
in ur app.js or main.js what ever u prefer just require either jquery.fileupload or jquery.fileupload-ui. For me I need to use the image preview and progress tracking and template engine so i'm requiring jquery.fileupload-ui
define([
'jquery',
'jquery.fileupload-ui',
], function($) {
$('#fileupload').fileupload({
// work on ur magic here
});
});
Related
It's been 3 days, I am searching for a solution to display my *.docx and *.xlxs file in my angular application. I have an API which is returning the files as blob. Now, I want to use that blob to show the file. I can easily download the file using window.open(blobLink), however, my main task was to view the file. So, I searched and found ngx-doc-viewer and it does not work with the blob link as I currently found and file needed to be publicly accessible. But, my application will run in the local network. So, how can I solve this problem. Here is my *.ts and HTML code below=>
TS
getFile(fileData: File) {
this.tempBlob= null;
this.ProposalService.getFile(fileData).subscribe(
(retFileData: any) => {
this.tempRetFileData = retFileData;
},
(err: Error) => {
},
() => {
const blob = new Blob([this.tempRetFileData], { type: this.contentType });
this.docURL = window.URL.createObjectURL(blob);
}
);
}
HTML
<ngx-doc-viewer [url]="docURL" viewer="google" style="width:100%;height:50vh;"></ngx-doc-viewer>
Note: Any other free Library and solution is acceptable.
For blob type use viewer="mammoth":
<ngx-doc-viewer [url]="docURL" **viewer="mammoth"** style="width:100%;height:50vh;"></ngx-doc-viewer>
To use mammoth, also add:
npm install mammoth --save
and make sure mammoth.browser.min.js is loaded. For the angular/cli you would add the following in angular.json:
"scripts": [
"node_modules/mammoth/mammoth.browser.min.js"
]
I've set up a very small browser project using create-js-app. I try to load a file called test.txt located in my src directory.
Following is the content of my main.js:
import * as THREE from 'three';
const loader = new THREE.FileLoader();
loader.load(
"test.txt",
function (data) {
console.log(data);
},
function (xhr) {
console.log(
"Loading file : " +
(xhr.loaded / xhr.total) * 100 +
"% loaded"
);
},
function (err) {
console.error(err);
}
);
When running my site in Chrome, I get the content of my index.html file instead of test.txt. I spent some time trying to understand this with no success.
I get this result no matter which file path I specify as first argument of loader.load(), I can even specify a file that is not existing.
Has anybody already faced this issue?
Thanks a lot.
Edit: I'm using Parcel as the bundler.
This issue comes down to internal details of create-js-app, and different web applications may host static resources (i.e. images and other assets that are not compiled source code) in different ways. But generally speaking, the src/ directory is not hosted/deployed/served on the website. If your application has the structure shown here then you probably want to put the .txt file into the public/ directory instead.
Requesting any file that cannot be found at the given URL might be giving you the index page instead, depending on how your site is set up by create-js-app.
I'm updating the answer above: I'm using Parcel. I fixed my project by adding this line:
url = require('test.txt')
The require function makes the browser import the txt file, and it returns the hashed url of the stored file. All I had to do next was to call
loader.load(url, ... )
Hi I am writing a node js app where I need to pass the path to some file via command line. I need to do this for configuration purposes. I understand that I can put all config details in a json file and then load it inside the app. But this is a specific requirement.
Here is my code
app.js
----
-----
console.log(process.argv);
---
--
// Start server
Now when I run this file in node as:
node app.js hii
Output
'hii'
But if I do
node app.js '/samplePath'
I get this output in DOS:
'\'/samplePath\''
I get this output in Git Bash:
'C:/Program Files/Git/samplePath'
How will I get just '/samplePath' as output? What am I doing wrong? Any help would be appreciated.
In order to get the last item, try
process.argv[2].split(/\//).pop();
You will have to parse the command line options your self. However you can look into this node module that will make this easy for you.
npm install commander
Here is an example from their Github page
var program = require('commander');
program
.version('0.0.1')
.option('-p, --peppers', 'Add peppers')
.option('-P, --pineapple', 'Add pineapple')
.option('-b, --bbq', 'Add bbq sauce')
.option('-c, --cheese [type]', 'Add the specified type of cheese [marble]', 'marble')
.parse(process.argv);
I am currently trying to get a path to a file to work but it just won't let me.
I'm working on a virtual directory so the path will be dynamic.
this is how my Directories are set up:
WebServices
->LiveScanServ.asmx(this is the file I want)
LiveScan
->ScanFolders.aspx
My browser Url looks like :http://localhost:43234/dynamicPart/Home.aspx#
inside my ScanFolders.aspx I am making a call to the file LivescanServ.asmx however it just won't find it. This is what I have so far:
<Services><asp:ServiceReference Path="~/WebServices/LiveScanService.asmx" /></Services>
but when I run it, it gives me a 404 error(Not Found).
Any ideas?
edit: this is my javascript for calling ScanFolders.aspx:
function loadLiveScanSync() {
$('#centreMenu').slideUp('slow', function () {
$('#centreMenu').children('div').css('display', 'none');
$('#loadedContentHolder').load('LiveScan/ScanFolders.aspx');
$('#loadedContentHolder').css('display', 'block');
The file you want is LiveScanServ.asmx. The file you have in your service reference is LiveScanService.asmx. Make sure you can manually resolve your asmx file in the browser, and that the url matches the path in your config.
WebService ->LiveScanServ.asmx(this is the file I want)
<Services><asp:ServiceReference Path="~/WebServices/LiveScanService.asmx" /></Services>
How can I add a bunch js files but include only one of them for client code? E.g. I need to use hammer.js and want add it as submodule. I can not simply add it in client/code/app cuz SS will try to load all contents of repo (including README.md).
You can modify the code portion of your ss.client.define so that Socketstream will only load the files you specify (rather than every single file that resides in the client/code/app folder - which is the default behaviour).
E.g change this:
ss.client.define('main', {
view: 'app.jade',
css: ['libs', 'app.styl'],
code: ['app'], // This is loading every file within the client/code/app/ folder
tmpl: '*'
});
to this:
ss.client.define('main', {
view: 'app.jade',
css: ['libs', 'app.styl'],
code: ['app/file1.js', 'app/file2.js', 'app/file4.js'], // SS will only load these files.
tmpl: '*'
});