I have followed this article to set up my app to open a file. I can successfully click on the file and launch my application. I can see the following in my console.log
(Foundation) [com.apple.foundation.filecoordination:claims] Write options: 0 -- URL: file:.......filename.........
Can someone either explain how I can access the file from my app once it launches?
Thanks
You will have to write your custom app delegate and implement applicationOpenURLOptions method to access the file.
For example,
var MyUIApplicationDelegate = UIResponder.extend(
{
applicationOpenURLOptions: function(app, url, options) {
var file = File.fromPath(url.path);
// process the file
return true;
},
},
{
name: "MyUIApplicationDelegate",
protocols: [UIApplicationDelegate],
}
);
application.ios.delegate = MyUIApplicationDelegate;
Related
I am trying to follow the Strapi v4.0.0 guide on https://docs.strapi.io/developer-docs/latest/developer-resources/plugin-api-reference/server.html#entry-file for extending the users-permission plugin to add a custom route/controller, but so far have been unsuccessful. I add the custom files as stated in the docs, but there is no change in the UI.
I managed to get this to work for normal API highlighted in yellow, but was unable to do so for the users-permission plugin
In the previous version 3.6.8 this functionality was allowed through the extensions folder.
Am I missing something from the new guide, I even tried copying the files from node_modules > #strapi > plugin-users-permission and adding a new route and method to the exiting controller file but it still does not reflect the change in the section where we assign different route permission to roles. The user-permission plugin still shows the original routes, with no change.
Thanks,
I ran into this thread while researching pretty much the same issue, and I wanted to share my solution.
First of all, I found this portion of the documentation more useful than the one you referenced: https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html
My goal was the write a new route to validate JWT tokens based on the comment made here: https://github.com/strapi/strapi/issues/3601#issuecomment-510810027 but updated for Strapi v4.
The solution turned out to be simple:
Create a new folder structure: ./src/extensions/user-permissions if it does not exist.
Create a new file ./src/extensions/user-permissions/strapi-server.js if it does not exist.
Add the following to the file:
module.exports = (plugin) => {
plugin.controllers.<controller>['<new method>'] = async (ctx) => {
// custom logic here
}
plugin.routes['content-api'].routes.push({
method: '<method>',
path: '/your/path',
handler: '<controller>.<new method>',
config: {
policies: [],
prefix: '',
},
});
return plugin;
};
If you're unsure what controllers are available, you can always check the API documentation or console.log(plugin) or console.log(plugin.controllers).
After the admin server restarts, you should see your new route under the user-permissions section as you would expect, and you can assign rights to it as you see fit.
My full strapi-server.js file including the logic to validate JWT:
module.exports = (plugin) => {
plugin.controllers.auth['tokenDecrypt'] = async (ctx) => {
// get token from the POST request
const {token} = ctx.request.body;
// check token requirement
if (!token) {
return ctx.badRequest('`token` param is missing')
}
try {
// decrypt the jwt
const obj = await strapi.plugin('users-permissions').service('jwt').verify(token);
// send the decrypted object
return obj;
} catch (err) {
// if the token is not a valid token it will throw and error
return ctx.badRequest(err.toString());
}
}
plugin.routes['content-api'].routes.push({
method: 'POST',
path: '/token/validation',
handler: 'auth.tokenDecrypt',
config: {
policies: [],
prefix: '',
},
});
return plugin;
};
When exporting routes you need to export the type, either content-api or admin. Look at the Strapi email plugin in node_modules for example, change the folder and file structure in your routes folder to match that and then you will be able to set permissions in the admin panel.
If your Strapi server is using Typescript, make sure that you name your extension files accordingly. So instead of strapi-server.js, you would need to name your file strapi-server.ts.
I'm trying to create a Windows applications using Electron and Vue. I want to send the application to the Tray and show an icon to maximize it again when clicked. It works fine in DEV but when I build the app, the Tray icon is not working.
The app it's executing, but when minimized the tray is not showing and there is not option to open it again (need to kill the process).
This is the code I'm trying to use:
app.on("ready", async () => {
if (isDevelopment && !process.env.IS_TEST) {
try {
await installExtension(VUEJS_DEVTOOLS);
} catch (e) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow();
createTray()
});
const createTray = () => {
const tray = new Tray(resolve(process.resourcesPath, '\\resources\\homeico.ico'))
const contextMenu = Menu.buildFromTemplate([
{
label: 'Show App', click: function () {
app.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true
app.quit()
}
}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
tray.on('click', () => {
console.log('clicked')
})
}
And in my vue.config.js:
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
"extraResources": [
{
"from": "extraResources",
"to": "resources",
"filter": [
"**/*"
]
}
]
}
},
},
The resolve(process.resourcesPath, '\resources\homeico.ico') line is pointing to a existing file, I'm printing this route in the App and I can open it in my Windows Explorer, but when I want to show the Image in the app, I can see next error in the DevTools:
Not allowed to load local resource: file:///C:/Users/mysUser/AppData/Local/Programs/business-config-tool/resources/resources/homeico.ico
The path is accesible, but not in the App.
What's the correct way to configure the path to the icon? there is another path I can configure for assets? I also tried with __dirname and other icon formats (ico, png..)
Thank you.
I ran into the same issue. I searched for a solution for hours, and I finally found one.
This solution is made for app using electron-vue (I personally used this Vue Cli electron plugin). And I tested it on Windows only.
The Tray must be initialised with an icon Path, wich needs be different wether you are running a built version of your app (yarn electron:build), or serving your app (yarn electron:serve).
I am using a function that I called isServeMode, wich basically tells me if I am using the serve mode or the buid mode. Here is what the function looks like :
// utils.js file
const isServeMode = () => {
return process.env.WEBPACK_DEV_SERVER_URL
}
You don't need to create this function, but it might be usefull somewhere else in your app so I suggest you to put it in a file that you can import from anywhere in your app. In my case, I created a utils.js file where I write those functions.
Then, put your tray icon in the public folder, it can not work if you put the icon in the src/assets folder, since we have to access it from the Node environnement and not from Vue. In my case, I put my icon in public/tray/icon.png.
Finally, we can use the electron Tray with Electron vue like this
import { Tray } from "electron"
import path from "path"
import { isServeMode } from "./utils" // Path depends on where you wrote your function
// Some Electron code...
let tray
createTray = () => {
const iconPath = isServeMode()
? path.join(__dirname, "/bundled/tray/icon.png")
: path.join(__dirname, "/tray/icon.png")
tray = new Tray(iconPath)
}
I will soon release a new version of my Unlighter app, wich is an electron-vue app that will include a Tray example. Feel free to take a look at this "real world app example" if you're interested.
I'm trying to build a file upload with Next.js and Ant Design using React.
On localhost, everything works fine. When I deployed the instance and try to upload a file, I get the following error:
Request URL: https://my-app.my-team.now.sh/url/for/test/
Request Method: POST
Status Code: 405
Remote Address: 34.65.228.161:443
Referrer Policy: no-referrer-when-downgrade
The UI that I use looks like the following:
<Dragger {...fileUploadProps}>{renderImageUploadText()}</Dragger>
where fileUploadProps are:
const fileUploadProps = {
name: 'file',
multiple: false,
showUploadList: false,
accept: 'image/png,image/gif,image/jpeg',
onChange(info) {
const { status } = info.file;
if (status === 'done') {
if (info.file.size > 2000000) {
setUploadSizeError('File size is too large');
} else {
handleFieldValue(API_FORM_FIELDS.PICTURE, info);
}
} else if (status === 'error') {
setUploadSizeError(`${info.file.name} file upload failed.`);
}
},
};
I assume, it has to do with the server side rendering of Next.js? On the other hand, it might not, because by the time I navigated to url/for/test it should render on the client.
How do you implemented file uploads with Ant Design and Next.js?
Got this to work by passing the prop action="https://www.mocky.io/v2/5cc8019d300000980a055e76" to the <Upload/> component.
The ANTD Upload component must make a POST request to upload the file. It either makes that POST request to the current url, which results in the 405, or to the url specified by the action prop. https://www.mocky.io/v2/5cc8019d300000980a055e76 works as this url.
Inspired by Trey's answer (and because I didn't want to send data anywhere outside my domain) I made a no-op api route that simply returns a success, and then pointed Ant Design <Upload>'s action to /api/noop
/* pages/api/noop.tsx */
import { NextApiRequest, NextApiResponse } from 'next'
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
res.status(200).end('noop')
}
/* Wherever I'm using <Upload /> */
<Upload
...otherProps
action={'/api/noop'}
>
Note: this is specific to Next.js, which makes it easy to create API routes.
This works for me.
By default, the ANTD upload component makes a POST request to upload the file. So, to avoid this, add a customRequest props on Upload as below.
customRequest={({ onSuccess }) => setTimeout(() => { onSuccess("ok", null); }, 0) }
i'm working on a Sencha Touch 2 app for android and iOS. App will load images and videos on login time and i need to cache them in the app. I know it video cache will be huge load but please let me know, can we store image files in app local folder or some other implementation.
Thanx in advance.
I am a developer with SIMpalm (http://www.simpalm.com), Yes you can store files in your device, you should use phonegap (http://docs.phonegap.com/en/3.0.0/cordova_file_file.md.html#File) File System for downloading.
It will download the files on Default Location.
You Should Move the file on your targeted location.
Example :
function getImageURI(imageURI) {
var gotFileEntry = function(fileEntry) {
// alert("got image file entry: " + fileEntry.fullPath);
var gotFileSystem = function(fileSystem) {
fileSystem.root.getDirectory("TestFolder", {
create : true
}, function(dataDir) {
var FileNewName = "test.jpg" ; //you can rename the file
// Move the file
fileEntry.moveTo(dataDir, FileNewName, success1, fsFail);
}, dirFail);
};
// get file system to copy or move image file to
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFileSystem,
fsFail);
};
// resolve file system for image
window.resolveLocalFileSystemURI(imageURI, gotFileEntry, fsFail);
var success1= function(success){
//Moving Success
var newFilePath=success.fullPath;
//Here you can save new path of your downloaded file
};
// file system fail
var fsFail = function(error) {
console.log("failed with error code: " + error.code);
};
var dirFail = function(error) {
console.log("Directory error code: " + error.code);
};
}// End getImageURI
I have a basic PHP app, where the user login is stored in the HTTP Session. The app has one main template, say index.html, that switch sub-view using ngView, like this
<body ng-controller='MainCtrl'>
<div ng-view></div>
</body>
Now, this main template can be protected via basic PHP controls, but i have sub-templates (i.e. user list, add user, edit user, etc.) that are plain html files, included from angular according to my route settings.
While i am able to check for auth what concern the request of http services, one user is able to navigate to the sub-template url and access it. How can i prevent this from happen?
I would create a service like this:
app.factory('routeAuths', [ function() {
// any path that starts with /template1 will be restricted
var routeAuths = [{
path : '/template1.*',
access : 'restricted'
}];
return {
get : function(path) {
//you can expand the matching algorithm for wildcards etc.
var routeAuth;
for ( var i = 0; i < routeAuths.length; i += 1) {
routeAuth = routeAuths[i];
var routeAuthRegex = new RegExp(routeAuth.path);
if (routeAuthRegex.test(path)) {
if (routeAuth.access === 'restricted') {
return {
access : 'restricted',
path : path
};
}
}
}
// you can also make the default 'restricted' and check only for 'allowed'
return {
access : 'allowed',
path : path
};
}
};
} ]);
And in the main/root controller listen for $locationChangeStart events:
app.controller('AppController', ['$scope', '$route', '$routeParams', '$location', 'routeAuths',
function(scope, route, routeParams, location, routeAuths) {
scope.route = route;
scope.routeParams = routeParams;
scope.location = location;
scope.routeAuth = {
};
scope.$on('$locationChangeStart', function(event, newVal, oldVal) {
var routeAuth = routeAuths.get(location.path());
if (routeAuth.access === 'restricted') {
if (scope.routeAuth.allowed) {
event.preventDefault();
}
else {
//if the browser navigates with a direct url that is restricted
//redirect to a default
location.url('/main');
}
scope.routeAuth.restricted = routeAuth;
}
else {
scope.routeAuth.allowed = routeAuth;
scope.routeAuth.restricted = undefined;
}
});
}]);
Demo:
plunker
References:
angularjs services
location
UPDATE:
In order to fully prevent html template access then it's best done on the server as well. Since if you serve the html from a static folder on server a user can access the file directly ex: root_url/templates/template1.html thus circumventing the angular checker.
If you want to block them from going to that page create a service: http://docs.angularjs.org/guide/dev_guide.services.creating_services
This service can be dependency injected by all your controllers that you registered with the routeParams.
In the service you can would have a function that would check to see if the person is logged in or not and then re-route them (back to the login page perhaps?) using http://docs.angularjs.org/api/ng.$location#path. Call this function in each of the controllers like so:
function myController(myServiceChecker){
myServiceChecker.makeSureLoggedIn();
}
The makeSureLoggedIn function would check what current url they're at (using the $location.path) and if it's not one they're allowed to, redirect them back to a page that they are allowed to be.
I'd be interested to know if there's a way to prevent the routeParams from even firing, but at least this will let you do what you want.
Edit: Also see my answer here, you can prevent them from even going to the page:
AngularJS - Detecting, stalling, and cancelling route changes